Issue when sending form with submit button disabled

Question

I have here this form:

<form id="register-form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
    <label>Name <span style='color: red'>*</span><br/>
        <input type='text' name='user_name'/>
    </label>
    <label>Email <span style='color: red'>*</span><br/>
        <input type='text' name='user_email'/>
    </label>
    //Another form elements
    <button name='register' type='submit'>Register</button>
</form>

To process the form, I use:

if(isset($_POST['register']))
{
    //Process
}

What I need is the register button to be disabled when the user clicks on it. I've found this solution:

$('#register-form').submit(function()
{
    $(this).find(":submit").attr('disabled', 'disabled');
});

With this jQuery code the button is disabled when I click on it, but PHP don't process the form. How to fix it?

It works for me [here](http://jsfiddle.net/8qe4mygq/), but I might have missed something. — Anders, Sep 02 '15 at 20:51
Which version of jQuery are you using? You may want to use `.prop()` instead of `.attr()` — Jay Blanchard, Sep 02 '15 at 20:52
@JayBlanchard Even with `.prop()` the form isn't subimitted. — Dyan, Sep 02 '15 at 20:55
Could you see in console's network tab that `register` is not posted? — Majid Fouladpour, Sep 02 '15 at 21:04
In network console all variables that need to be sent are empty and I have no PHP response. — Dyan, Sep 02 '15 at 21:06
Just moment - you want to disable button on submit?That action doesn't make sense, since page will be refreshed, right? Also, code works and variables are sent, btw (wrap code in $(document)ready(), just in case)... — sinisake, Sep 02 '15 at 21:15
@nevermind I want to prevent multiple form submitions. The code I'm using is inside `$(document).ready()`, but I don't get the response from PHP process. — Dyan, Sep 02 '15 at 21:18
I have just tested your code, and it works fine - but this is not way to prevent multiple form submissions - you can't save state of the button when the page is reloaded - if you don't do it with php... http://paste.ofcode.org/V83KXDHtt7sUqvvvA9uq6x complete code, tested on localhost — sinisake, Sep 02 '15 at 21:21
And your action attribute call same page, so, script should be executed on same page, which means - page will be reloaded. If you use ajax, on the other hand, and separate php script -> no reloading, and button state can be save. — sinisake, Sep 02 '15 at 21:26
@nevermind I do the form validation in PHP. No matter if the page is refreshed. I just do not want the user to take too many clicks at once. — Dyan, Sep 02 '15 at 21:26
Is your PHP in the same page? If so, disabling the button (as @nevermind pointed out) will not work as it will be enabled immediately upon page reload. — Jay Blanchard, Sep 02 '15 at 21:28
@JayBlanchard Yes, the script runs in same page. May this be the problem? — Dyan, Sep 02 '15 at 21:29
@nevermind I don't want the button disabled after the submition when the page is refreshed. I need that disabled when the user clicks on it to send the form. — Dyan, Sep 02 '15 at 21:33
Yes, that is the problem, *the PHP must be separate*. You'll also have to re-enable the button when the AJAX returns. — Jay Blanchard, Sep 02 '15 at 21:33
You will need ajax and sessions then... After user submit form first time, don't disable button, send form data, create session var; after he tries it for a second time, if session var exists - disable button, and don't send data.... something like it... — sinisake, Sep 02 '15 at 21:39
@nevermind I've found a solution that allows me to disable the button and send the form. Please take a look in my answer here! — Dyan, Sep 02 '15 at 21:58
Please don't use unescaped PHP_SELF, rather use action="". Easier and safe (and a valid URI!). http://stackoverflow.com/a/25703224/4397981 — TacoV, Sep 07 '15 at 08:16

Dyan · Accepted Answer · 2015-09-02T22:10:20.200

1

I've found the solution by using a little hack.
How? I create a hidden input in the form called register.

<form id="register-form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<label>Name <span style='color: red'>*</span><br/>
    <input type='text' name='user_name'/>
</label>
<label>Email <span style='color: red'>*</span><br/>
    <input type='text' name='user_email'/>
</label>
//Another form elements
<input type='hidden' name='register'/>
<button id='register'>Register</button>
</form>

Now I send the form with jQuery:

$('#register').click(function()
{
    $('#register-form').submit();
    $(this).prop('disabled', true);
});

Using this trick the button thats submit the form are not disabled, only the button that call the function. Then PHP can process the form:

if(isset($_POST['register']))
{
    //Process
}

edited Sep 02 '15 at 22:10

answered Sep 02 '15 at 21:57

Dyan

303
1
3
14

1

You have assigned a click event to an element you do not have in your page - `#register` – Jay Blanchard Sep 02 '15 at 22:05
This seems way too complicated and doesn't degrade gracefully. Just add the form.submit() in your original code and disable the button... And even that shouldn't be necessary (check http://stackoverflow.com/a/13606633/4397981 ). I'll have a try at your code later to check my own sanity :) – TacoV Sep 07 '15 at 07:01
I see the key comment there now "This keeps submit button values from being submitted. Usually not a problem, but it can be". I think the solution would be to submit - disable - prevent default (in that order!). Or; much like your solution, not using the submit button value as input (instead a hidden field or an variable in the action uri) – TacoV Sep 07 '15 at 08:21
The submit - disable - prevent route didn't work - it gave rise to an infinite loop. Use the solution in your post, but don't rely on click(), instead let submit() trigger your code. – TacoV Sep 07 '15 at 08:48

Jay Blanchard · Answer 2 · 2015-09-02T21:05:52.623

0

If you're using jQuery version 1.6 or later you should use the .prop() method to modify properties:

$('#register-form').submit(function(){
    $(this).find(":submit").prop( "disabled", true );
});

Here is an example

edited Sep 02 '15 at 21:05

answered Sep 02 '15 at 20:56

Jay Blanchard

34,243
16
77
119

Even with `.prop()` the form is not processed. – Dyan Sep 02 '15 at 20:57
See the updated answer @Dyan - I was still typing :-) – Jay Blanchard Sep 02 '15 at 20:59
Thank you for your answer, but even changing the `button` to `input` the PHP can't process the form. :/ – Dyan Sep 02 '15 at 21:02
Look, I'm using: `` and `$('#register-form').submit(function() { $(this).find(":submit").prop('disabled',true); });` But still not works. – Dyan Sep 02 '15 at 21:03
1

See the link to my example which is working. http://jsfiddle.net/360q932t/1/ Are you sure that jQuery has loaded in your page @Dyan? – Jay Blanchard Sep 02 '15 at 21:06
Yes, the jQuery was loaded. If I remove the code `$('#register-form').submit(function(){ $(this).find(":submit").prop( "disabled", true ); });` all works fine. I think the button is being disabled before sending the form. – Dyan Sep 02 '15 at 21:14
Everything in the call would be asynchronous @Dyan, the button is not disabled until it is clicked and everything else within the submit function should run. – Jay Blanchard Sep 02 '15 at 21:18
I pass the variables by using `$user_name = $_POST['user_name']; $user_email = $_POST['user_email'];` I verified here and the variables are sent, but PHP don't give response! – Dyan Sep 02 '15 at 21:23
That is additional code you've not shown in your original question @Dyan, and actually a different question than your original. If the variables are sent and PHP does not respond it is a PHP problem. Edit your original post and add the relevant code. – Jay Blanchard Sep 02 '15 at 21:25
Hmm. Try to remove the **id attribute** in your form and put that inside your button. – aldrin27 Sep 02 '15 at 21:25
You can, and should, submit with the form's identification in the selector @aldrin27 – Jay Blanchard Sep 02 '15 at 21:26
Jay, I've found a way to perform what I need. Please take a look in my answer right here. – Dyan Sep 02 '15 at 21:57
Having two items with the same name is a bad idea - it is like duplicating id's when you're not grouping something. Your selector `$('#register')` is not available - you have nothing with that id in your page, so that click event will not occur @Dyan – Jay Blanchard Sep 02 '15 at 22:00

score 0 · Answer 3 · answered Sep 02 '15 at 21:36

0

Maybe this could work.

HTML:

 <form action="<?=$_SERVER['PHP_SELF']?>" method="post">
 <input name='register' type='submit' id="register-form" />Register
//I remove the **ID Attribute** from the form and put it in the button.

Jquery:

 $('#register-form').on('submit', function(){
   $(this).attr('disabled', true);
 });

Or as Jay Blanchard said if the version is 1.6

 $('#register-form').on('submit', function(){
   $(this).prop('disabled', true);
 });

answered Sep 02 '15 at 21:36

aldrin27

3,407
3
29
43

With your code the form is sent and I get PHP response, but the button is not disabled... then I changed to `$('#register-form').click(function() { $(this).prop('disabled', true); });` and the button is disabled but I have no PHP response. God, this is making me lose my sanity. – Dyan Sep 02 '15 at 21:43
I've found a solution to achieve what I need and posted as an answer here. – Dyan Sep 02 '15 at 21:59

score 0 · Answer 4 · answered Sep 02 '15 at 22:16

I think you need this solution :

 <html> 
 <head> 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js">   </script> 
  <script src="http://malsup.github.com/jquery.form.js"></script> 

  <script> 
    // wait for the DOM to be loaded 
    $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#register-form').ajaxForm(function() { 

            $('#register-form').find(":submit").prop( "disabled", true );

        }); 
    }); 
    </script> 
   </head> 

    <form id="register-form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
   <label>Name <span style='color: red'>*</span><br/>
   <input type='text' name='user_name'/>
   </label>
   <label>Email <span style='color: red'>*</span><br/>
   <input type='text' name='user_email'/>
   </label>
   //Another form elements
   <input type='hidden' name='register'/>
   <button id='register'>Register</button>
  </form>

I got it from here http://malsup.com/jquery/form/

please try to change the action to target page,not the same page , then make any query to insert these post variables to make sure that they were posted correctlly

score 0 · Answer 5 · answered Sep 03 '15 at 02:21

In your form, put id in your button and class in your form.

<form class='Register-form' id="register-form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
    <button id='Register' name='register' type='submit'>Register</button>
</form>

In your function

$('form.Register-form #Register').click(function(e){
    e.preventDefault();
    $('#register-form').submit();
    $(this).prop('disabled', true);
});

Issue when sending form with submit button disabled

5 Answers5