CODEWITHSUNDEEP
phpjqueryhtml
Dyan
Dyan

Reputation: 313

Issue when sending form with submit button disabled

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?

Upvotes: 2

Views: 1092

Answers (5)

Micaela
Micaela

Reputation: 132

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);
});

Upvotes: 0

Mohammed Elhag
Mohammed Elhag

Reputation: 4302

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

Upvotes: 0

Dyan
Dyan

Reputation: 313

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
}

Upvotes: 1

aldrin27
aldrin27

Reputation: 3407

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);
 });

Upvotes: 0

Jay Blanchard
Jay Blanchard

Reputation: 34416

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

Upvotes: 0

Related Questions