Disabling single submit button in a form with multiple submit buttons

Question

My form has two submit buttons. I'm using the following code to disable the submit buttons after they are clicked; however, when it submits the form, it always triggers the first submit button (even if I clicked the second submit button). I would like to trigger the second submit button.

<script>
$('input[type=submit]').click(function() {
    $(this).attr('disabled', 'disabled');

    //This line submits the form as if the first button was clicked
    $(this).parents('form').submit();
});
</script>

<form method="post">
    <!-- other form elements here -->
    <input type="submit" value="button1">
    <input type="submit" value="button2">
</form>

Without knowing the structure of your HTML, all I can say is, use the same selector for getting both input buttons and disabling them that way. — Ivan
– Ivan, Commented May 6, 2016 at 18:51
Well, if there are two submit buttons within the same form, then that explains it. — Hozikimaru
– Hozikimaru, Commented May 6, 2016 at 18:54
Why are you using two submit buttons? Are they supposed to submit differently? — nurdyguy
– nurdyguy, Commented May 6, 2016 at 19:38
@nurdyguy on server-side they are treated differently. This is a drupal website. — farjam
– farjam, Commented May 6, 2016 at 19:42
As is they do the exact same thing and are submitted the exact same way, at least from what you have here. They are both covered by the same jQuery bind. Are they supposed to hit different server-side endpoints? — nurdyguy
– nurdyguy, Commented May 6, 2016 at 19:46

Dekel · Accepted Answer · 2016-05-06 23:20:10Z

Your problem here is that you are running into a race condition, and I'll explain: You wish to disable the button, but in doing so you are also disabling the option for submitting the form (using that button), so your solution is to handle the submittio yourself (by calling the submit() function from the JS code).
The problem you got here is that when you call the submit() function (from js) you are not getting the value of the button that was clicked.

Another problem that you got here is the fact that your buttons doesn't have names, so no matter what - you will not get their values on your server.

Anyway - you got 2 options here.
The first one - have a hidden field, and when the user clicks the button - set the value of that field to the value of the button that was clicked, and submit the form. You will receive the data on the server.

The second option is to set the button as disabled right after you make sure the form is submitted. Here is an example:

<form method="post">
    <!-- other form elements here -->
    <input type="submit" name="a" value="button1">
    <input type="submit" name="a" value="button2">
</form>
<script>
$('input[type=submit]').click(function() {
    var clickedBtn = $(this)
    setTimeout(function() {
        clickedBtn.attr('disabled', 'disabled');
    }, 1);
});
</script>

(Also notice I moved your js code right after your html, otherwise your jquery selector will find nothing)

Collectives™ on Stack Overflow

Disabling single submit button in a form with multiple submit buttons

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related