CODEWITHSUNDEEP
javascripthtml
user3861559
user3861559

Reputation: 993

populating a field value based on the button clicked

I have a html form with a hidden field and 2 submit buttons. Based on what button in clicked ( trial or buy) I need to set the promo code field ( with "trial" as promo code for trial button and "buy "as promo code for buy button.

I am not sure how I could read what button is clicked in java script. I have a java script already in place that is copying email ID into another field on hitting submit. I'd like integrate the java script with existing one.

HTML code:

<form>Email:
    <input type="text" name="email">
    <br>
    </label><input type ="hidden" name="retype-email">
    <br>

    <input type="hidden" name="PromoCode" value="" method="post">

    <input class="Orange_button" type="submit" value="Start my free trial"> 
    <input class="green_button" type="submit" value="Buy it now"> 
</form>

JS Fiddle: http://jsfiddle.net/x1bdgvyt/3/

Upvotes: 0

Views: 416

Answers (3)

Roldan
Roldan

Reputation: 245

Here is my solution:

$('#usuario_form').submit(function(e){   
   console.log($('#'+e.originalEvent.submitter.id));
   e.preventDefault();
});

You can have access to OriginalEvent Submitter Id to identify wich button was clicked

Upvotes: 0

Pierre Le Bot
Pierre Le Bot

Reputation: 324

First, add 'data-type' (or whatever the name, most important is the prefix data-) to your inputs:

HTML

<input data-type="trial" class="Orange_button" type="submit" value="Start my free trial">
<input data-type="buy" class="green_button" type="submit" value="Buy it now">

Then, change a bit your javascript in order to grab the data-type value and populate your field with it:

Javascript

$('[type="submit"]').on('click', function(e) {
    // populate your duplicated 'email' field
    $('[name="retype-email"]').val($('[name="email"]').val());
    // populate your 'code' field : grab the data-type attribute added in your HTML
    $('[name="PromoCode"]').val($(this).data('type'));
    // finally, submit the form
    $('form').submit();
});

Quick warning: you should consider using IDs or classes instead of working with wide selectors like [attr], it could be an issue if you have more than one form in your page (and it's a better practice anyway)

Upvotes: 0

skeryl
skeryl

Reputation: 5295

It looks like the best solution is to manually track which button was clicked by subscribing to their "click" events.

Working Example here (jsFiddle)

HTML

<form>Email:
    <input type="text" name="email">
    <br>
        </label><input type ="hidden" name="retype-email">
    <br>

    <input id="promo-code" type="hidden" name="PromoCode" value="" method="post">

        <input class="Orange_button" type="submit" value="Start my free trial" data-code="trial"/> 
        <input class="green_button" type="submit" value="Buy it now" data-code="buy"/> 
</form>

JavaScript

$('form').on('submit', function(e){
    $('[name="retype-email"]').val($('[name="email"]').val());
    var value = $("input[type=submit][clicked=true]").data("code");
    $("#promo-code").val(value);
    alert(value);
    e.preventDefault()
});

$("form input[type=submit]").click(function() {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
});

Note that I added a data attribute to the submit buttons so that we can store the code that should be added.

source: jQuery: how to get which button was clicked upon form submission?

Upvotes: 1

Related Questions