Search jQuery

jQuery Forum

Determining which of two submit buttons were clicked in a single form

in Using jQuery • 2 years ago

Seems to me this would be a fairly common situation (if not commonly asked and answered), but the posts I did find about this subject didn't seem to help me.

Given this basic code:

</form>

In the form submit handler: $('#addClassAndDocs').submit(function(){ I need to be able to determine which button was clicked so I can perform the correct ajax call.

One possible alternative I think is to handle the button events, rather than the form submission, but this thread told me to do it how I have it above. Due to that thread solution, the second button works, but at the time I posted that, I forgot about the first button!

Thanks for any help!
____________________________________
f u cn rd ths u cn gt a gd jb n prgrmmng

Replies(5)

wolfing

Re: Determining which of two submit buttons were clicked in a single form

2 years ago

you'll probably need a click handler for the buttons. In the form 'submit' event, you don't know what button (or if any button) was clicked.
In general, you use the 'submit' event when you want to do stuff after the form is submitted, like validate fields, which is usually what you want. But if you want to know how the form was submitted (which button, etc) you'll need to do it before the submit, like...
$(function() {
     var buttonpressed;
    $('.submitbutton').click(function() {
        buttonpressed = $(this).attr('name')
    })
    $('form').submit(function() {
        alert('button clicked was ' + buttonpressed)
            buttonpressed=''
        return(false)
    })
})
</script>
...
<form action="" method="post">
<input type="submit" class="submitbutton" name="buttonClass" value="Add Class">
<input type="submit" class="submitbutton" name="buttonDoc" value="Add Doc">
</form>

You could do it all in the button event too, but then nothing would happen if someone pressed 'enter' to submit. By using the 'submit' event, in the case the user pressed 'enter', you could either reject the submission, use a 'default' button or do whatever you need to do.

eventide

Re: Determining which of two submit buttons were clicked in a single form

2 years ago

Thanks again for the info, wolfing. To try out your code I added the class "classAndDocsFormSubmit'" to the two submit buttons and changed your code to use the correct form name. Here's what I have:

var buttonpressed;
$('.classAndDocsFormSubmit').click(function() {
buttonpressed = $(this).attr('name')
});

$('#addClassAndDocs').submit(function() {
alert('button clicked was ' + buttonpressed)
return(false)
});

Here is the code for the two buttons:

Each button's click was detected and the alert box showed, but each of them displayed the same thing: "button clicked was undefined". I tried changing .attr('name') to attr('id') but got the same thing.
____________________________________
f u cn rd ths u cn gt a gd jb n prgrmmng

wolfing

Re: Determining which of two submit buttons were clicked in a single form

2 years ago

that's odd, it works for me in my little test file in Firefox, IE and Chrome. Can you put your full code here or in like fiddler?

charlietfl

Re: Determining which of two submit buttons were clicked in a single form

2 years ago

never tried this but I would add a hidden field and change it's value on the button click. Would make serializing the form easier as the hidden field would be include in serialize()