Which Submit Button Was Pressed?

May 29, 2023 Post a Comment

In this jsfiddle http://jsfiddle.net/littlesandra88/eGRRb/ have I submit buttons that are auto-generated. Each table row gets an unique ID number, and if needed each submit button

Solution 1:

You could use delegate():

$('form').delegate('input:submit','click',
                   function(){
                       alert(this.name);
                       return false;
                   });

JS Fiddle demo.

Edited to address question in the comments, from OP:

Would it be possible to display 0 or 1 as the state of the associated checkbox with this approach?

Yeah, that's possible, though it's a little more long-winded than I'd like:

$('form').delegate('input:submit','click',
                   function(){
                       var idString = this.name;
                       var checkboxState = $('#' + idString).find('input:checkbox').is(':checked');

                       if (checkboxState == true){
                           alert('1');
                       }
                       else {
                           alert('0');
                       }
                       return false;
                   });

JS Fiddle demo.

Solution 2:

You will need to add an onClick handler to each button that does:

$(this).closest('form').data('submit_name', this.name);

Solution 3:

Assign a function to the click event of the submit buttons. That function should simply store the clicked button's value in a variable. Inside the submit event of the form, check the value of that variable. The submit event will fire after the click event so you should be able to get the expected result.

Demo here

The thing to note here is that that different browsers behave differently when dealing with multiple submit buttons; specially when you hit enter to submit the form. I think my example takes care of this.

Solution 4:

As you are using one form and using $('form').live('submit', function() { and both submit buttons are in the same form so its not possible in submit event. You have to use click event or two form tags.

Solution 5:

Here is how I solve this,

HTML

<form id="my-form" ...>
    ....
    <a href="#my-form" class="btn-form-submit" data-value="save">Save</a>
    <a href="#my-form" class="btn-form-submit" data-value="save-and-add">Save and add another</a>
</form>

Javascript

$('.btn-submit-form').on('click', function(ev){
    ev.preventDefault();
    var $form = $(this).attr('href');
    if ($form.length > 0) {
        $form.trigger('submit', {'submitBtn': $this});
    }
});


$('form').on('submit', function(ev, extra) {
    if (extra && extra.submitBtn) {
        var submitVal = extra.submitBtn.attr('data-value');
    } else {
        var submitVal = null;
    }

    // submit the form as you want with submitVal as one of the fields.
});

The advantage here is that your form only submits on the submit event and not on click event. This way you can have one common function to submit the form whether you click a button, hit return in a form field or submit it pragmatically.

I also like to make things as generic as possible and turn them into patterns. This two functions can work across your whole project if you come up with some patterns like naming each submit button with value as .btn-form-submit and having a data-value attribute to store the value.

Html5 Lite