Why does my form not submit when I disable the submit after the first click?

Question

I am trying to disable the submit button on a form so when the user clicks it twice it won't submit it again. I know there are already a few questions here that address that, but the solutions offered don't seem to be working.

I am using the solution offered here: Disable submit button on form submit

Here's my jQuery:

$('form#proof_form').submit(function(){
    $(this).children('input[type=submit]').attr('disabled', 'disabled');
});

After the submit button is pushed it is supposed to enter a saved value to a DB and then redirect to another page. Instead it is now reloading the current page without redirecting. I placed a test echo right after the user pushes the submit button and it doesn't work. Also the value is no longer posting to the DB, so I know it is disabling the submit button before it can send to the DB and redirect.

Here is my php:

if(isset($_POST['accept_proof'])){
    echo 'The form was submitted!';
    $sql = 'INSERT into orders SET
          name = "' . $_SESSION['name'] . '"';
    $conn->query($sql) or die($conn->error);
}

Why is the button not submitting after the first click?

Does it actually work if you take that one disable line out and leave everything else alone? — DarthJDG, May 06 '11 at 07:56

score 2 · Answer 1 · answered May 06 '11 at 07:58

Disabled HTML form elements are not submitted.

I'm guessing 'accept_proof' is the name of your submit button, so, because it's being disabled before the form is submitted, its value is not set in the POST to the server; isset($_POST['accept_proof']) is returning false, and your code inside the if isn't executing.

You'll need to check for the POSTed form some other way, e.g. isset() on a different field in the form.

score 1 · Answer 2 · answered May 06 '11 at 07:56

1

You forgot the "return false;"

Try this instead :

$('form#proof_form').submit(function(){
    $(this).children('input[type=submit]').attr('disabled', 'disabled');
    return false;
});

It works for me. http://jsfiddle.net/5S72w/2/

answered May 06 '11 at 07:56

Timon. Z

681
3
9

2

Returning false from the submit event stops the form from being submitted at all. The button will disable correctly, but the page will just sit there. (This problem is a server-side one, so can't really be demonstrated on jsFiddle.) – Paul Calcraft May 06 '11 at 08:10

score 0 · Answer 3 · answered May 06 '11 at 07:55

0

If the same page is refreshing, i think you forgot to put your form's action attribute. You should have this:

<form action="your_action" ...> 
  ... 
</form>

HOpe this helps. Cheers

answered May 06 '11 at 07:55

Edgar Villegas Alvarado

18,204
2
42
61

He is redirecting to another page. – Roko C. Buljan May 06 '11 at 08:01

score 0 · Answer 4 · edited Nov 10 '12 at 17:22

I've been stuck on this all day. My version of the submit button calls a validate function onclick, and then disables the button at the end of the validation. The problem I had was that since the button is disabled, and the form's action is not what I need, the button does not submit the form once it is disabled.

After hours of searching around the internet, I found that all I had to do was to call my form's submit() function after the disabling to submit the form.

So if my form's name is myform

then I call myform.submit() after the disabling.

Hope this helps

Why does my form not submit when I disable the submit after the first click?

4 Answers4