2

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?

Improve this question
18
  • It works for me here, but I might have missed something. Commented Sep 2, 2015 at 20:51
  • Which version of jQuery are you using? You may want to use .prop() instead of .attr() Commented Sep 2, 2015 at 20:52
  • @JayBlanchard Even with .prop() the form isn't subimitted. Commented Sep 2, 2015 at 20:55
  • Could you see in console's network tab that register is not posted? Commented Sep 2, 2015 at 21:04
  • 1
    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. Commented Sep 2, 2015 at 21:26

5 Answers 5

Reset to default
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 }
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

You have assigned a click event to an element you do not have in your page - #register
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 stackoverflow.com/a/13606633/4397981 ). I'll have a try at your code later to check my own sanity :)
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)
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.
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

Improve this answer

13 Comments

Even with .prop() the form is not processed.
See the updated answer @Dyan - I was still typing :-)
Thank you for your answer, but even changing the button to input the PHP can't process the form. :/
Look, I'm using: <input name='register' type='submit'/> and $('#register-form').submit(function() { $(this).find(":submit").prop('disabled',true); }); But still not works.
See the link to my example which is working. jsfiddle.net/360q932t/1 Are you sure that jQuery has loaded in your page @Dyan?
|
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); });
Improve this answer

2 Comments

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.
I've found a solution to achieve what I need and posted as an answer here.
0

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

Improve this answer

Comments

0

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); });
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.