Disabling multiple form buttons on submit, and sending appropriate value?

Question

I'm using the following code JSFiddle:

$("form").submit(function() {
    $(':submit', this).attr('disabled', true);
    $(this).append($('<input/>').attr({
        type: 'hidden',
        name: $(':submit', this).attr('type'),
        value: $(':submit', this).attr('value')
    }));
});

<input type="submit" value="Approve" /> <input type="submit" value="Update" />

This successfully disables the buttons on submit, but I'm trying to send the appropriate value. It doesn't matter which button is clicked, it always returns the value of the first button. How can I resolve this?

What I want to happen is when you click "Approve" it sends "Approve", and when you click "Update" it sends "Update".

Please look at this thread: [enter link description here](http://stackoverflow.com/questions/3577469/form-onsubmit-determine-which-submit-button-was-pressed) — Frank Wisniewski, Apr 28 '17 at 14:40

Gerry · Answer 1 · 2017-04-28T16:50:22.490

Try binding the submit buttons, not the the form, like this:

$(':submit').on('click', function(e) {
    e.preventDefault();
    $(':submit', this).attr('disabled', true);
    $("form").append($('<input/>').attr({
        type: 'hidden',
        name: $(':submit', this).attr('type'),
        value: $(':submit', this).attr('value')
    }));
    alert($(this).attr('value'));
});

Check the snippet:

$(':submit').on('click', function(e) {
    e.preventDefault();
    $(':submit', this).attr('disabled', true);
    $("form").append($('<input/>').attr({
        type: 'hidden',
        name: $(':submit', this).attr('type'),
        value: $(':submit', this).attr('value')
    }));
    alert($(this).attr('value'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST">
<input type="submit" value="Approve" /> <input type="submit" value="Update" />
</form>

Not sure why, but this solution isn't actually submitting the hidden field along with the rest of the form. — mister martin, Apr 28 '17 at 16:05
@mistermartin Fixed it. The problem was in `$(this).append`, i forgot to change it to `$("form").append`. Now it should work. — Gerry, Apr 28 '17 at 16:55

score 2 · Accepted Answer · answered Apr 28 '17 at 14:39

The below code will work for all cases.

JS:

$("input[type=submit]").on("click", function() {
    $(this).attr("data-clicked", true);
});

$("form").submit(function(e) {
    e.preventDefault();
    $(':submit', this).attr('disabled', true);
    $(this).append($('<input/>').attr({
        type: 'hidden',
        name: $('[data-clicked=true]').attr('type'),
        value: $('[data-clicked=true]').attr('value')
    }));
    alert($('[data-clicked=true]').attr('value'));
    $('[data-clicked=true]').removeAttr("data-clicked")
});

score 1 · Answer 3 · 2017-04-28T14:58:41.713

Give class to submit buttons.

HTML

    <form method="POST">
    <input class="submit-class" type="submit" value="Approve" /> 
    <input class="submit-class" type="submit" value="Update" />
    </form>

JS

$('.submit-class').on('click',function(){
    click_val = $(this).val();
});

$("form").submit(function(e) {
    e.preventDefault();
    $(':submit', this).attr('disabled', true);
    $(this).append($('<input/>').attr({
        type: 'hidden',
        name: $(':submit', this).attr('type'),
        value: $(':submit', this).attr('value')
    }));

    alert(click_val);
});

Disabling multiple form buttons on submit, and sending appropriate value?

3 Answers3