Submit form with two submit buttons, each performing different actions issue

Question

I have a JSP page, which has standard form on it. I have two buttons, each perform a different action when pressed, and the form is submitted - action 1 and action 2.

I originally had this set up for one button, so it was all done through the following and worked fine:

$('#form').submit( function() { .... }

But now I have two buttons, I want it to do the same, but how to find which button I pressed.

I could do this through the .click function, but I dont want to break my existing form.submit functionality.

Below is my code for this - which doesn't work:

    $('#form').submit( function() {

        // Set the field array variables with data
        $('button[name="action1"], [name="action2"]').each(function(index) {
            alert('index : ' + index );
            alert('value : ' + this.value);
        });

        $('button[name="action1"]').click(function(e) { 
            alert('ac1 clicked');
        }); 

        $('button[name="action2"]').click(function(e) { 
            alert('ac2 clicked');
        });

my html buttons are:

            <button id="submitButton" name="action1" value="action1" type="submit">action 1</button>
            <button id="submitButton" name="action2" value="action2" type="submit">action 2</button>

Is there a way I can do this inside my form.submit, or a way to do the .click, which then submits the form. I am a little lost for a solution on this?

Please help :)

duplicate http://stackoverflow.com/questions/3577469/form-onsubmit-determine-which-submit-button-was-pressed — Willem D'Haeseleer, Aug 03 '12 at 11:49
I think there was an answer similar with your: http://stackoverflow.com/questions/547821/two-submit-buttons-in-one-form — LLAlive, Aug 03 '12 at 11:53

score 2 · Answer 1 · answered Aug 03 '12 at 11:53

You can read the related target of the event object.

$('#form').on('submit', function(evt) {
    if (evt.relatedTarget && $(relEl).is('input[type=submit]')) {
        /* related element is a button - do something */
    }
    evt.preventDefault(); //cancel form submit, as required
});

score 0 · Answer 2 · answered Aug 03 '12 at 11:50

0

In the button's click handler, set a hidden field before submitting the form. Then read the value of that hidden field in the request handler to find out which action was requested.

answered Aug 03 '12 at 11:50

tdammers

20,353
1
39
56

score 0 · Answer 3 · answered Aug 03 '12 at 11:51

0

Bind a event handler to your buttons

$('button').on('click', function(e) {
    var buttonId = $(this).attr('name');
    if(buttonId = 'action1') {
        // action1 was pressed
    } else {
        // action2 was pressed
    }

    $('#form').trigger('submit'); // trigger submit of form.

    e.preventDefault();
});

answered Aug 03 '12 at 11:51

ninja

2,233
1
15
15

Hi @ninja This is working well for what I need. Only issue is, my form.submit has a function, i.e. `$('#form').submit( function() { ... }` How can I do this with the trigger submit you have suggested? – babb Aug 03 '12 at 12:27

Beetroot-Beetroot · Answer 4 · 2012-08-03T12:08:03.900

For standard HTML form submission :

HTML:

<form method="..." action="...">
    ...
    <input type="hidden" name="action">
    <input value="action1" type="submit" value="action 1" />
    <input value="action2" type="submit" value="action 2" />
    ...
</form>

Javascript:

$('button[type="submit"]').on('click', function() {
    $("#action").val(this.value);//where "#action" selects an input field (in the same form) of type="hidden"
});

For AJAX submission, do the same but read the action field's value back into javascript in the submit handler.

score 0 · Answer 5 · answered Aug 03 '12 at 11:56

First of, never include two dom elements with the same id on the same page. The class attribute is for such things. Change the id's of the buttons to submitButton1 and submitButton2 respectively and then this ought to work:

$('#submitButton1').closest('#form').submit(function() {
    // first button action
});

$('#submitButton2').closest('#form').submit(function() {
    // second button action
});

Submit form with two submit buttons, each performing different actions issue

5 Answers5