CODEWITHSUNDEEP
javascriptjqueryforms
Filippo oretti
Filippo oretti

Reputation: 49815

How can I disable/enable form submit in an ajax request

I'm trying first disabling form submission before the request starts and then on success enable again the form submit

this is my code:

$.ajax({
 beforeSend:function(){
//disable form
            $('form').on('submit',function(){
               return false;
            });
},
success:function(){
            //enable form
            $('form').on('submit',function(){
               return true;
            });
},
complete:function(){
            //enable form
            $('form').on('submit',function(){
               return true;
            });
,
});

it seems not working on success and complete, the form is disabled but not enabled then.

I'm using latest jQuery version.

Upvotes: 0

Views: 1445

Answers (4)

Rob Willis
Rob Willis

Reputation: 4844

jQuery events normally support multiple handlers so you would need to turn the previous event handlers off before attaching a new one.

To use off you need to keep a reference to your handler e.g. 

var myForm = $("form"),
    enableSubmit = function(event) { return true; },
    disableSubmit = function(event) { return false; },
    ajaxCompleteHandler = function() {
        myForm.off(disableSubmit);
        myForm.on(enableSubmit);
    };

myForm.on(enableSubmit);

$.ajax({
    beforeSend: function() {
        myForm.off(enableSubmit);
        myForm.on(disableSubmit);
    },
    success: ajaxCompleteHandler,
    error: ajaxCompleteHandler,
    complete: ajaxCompleteHandler //you might get away with just this as I believe it's called for success and failure
});

Alternatively you could just disable the submit button ($("mybutton").prop("disabled", true))which should be more intuitive to the user.

Upvotes: 1

Tiny Jaguar
Tiny Jaguar

Reputation: 433

Once you return false on the submit button,it is obvious that you cannot again invoke submit operation, because the form is not now able to submit info.

The another solution is that use onclick function,like below :

Javascript file

function savecustomquestion(){
$.ajax({
        type : 'POST',
        url : 'customquestion.php',
        data:{tablename:$('#productname').val(),name:$('#uname').val(),email_address:$('#email').val(),voucher_code:$('#voucher_code').val(),question:$('#customquestion').val()},
        success: function(response){
            console.log("yes");
        },
        error : function(response){
            console.log(response);
        }
    });

}

HTML code

<button type="button" id="customquestionbutton" class="span2" onclick="savecustomquestion()">Verstuur</button>

PHP code

mysql_select_db('mydatabase',$connect);

if(!isset($_POST['voucher_code'])){
    $voucher_code   = "";
}
else{
    $voucher_code   = $_POST['voucher_code'];
}
$email_address = $_POST['email_address'];
$name          = $_POST['name'];
$question      = $_POST['question'];
$tablename     = $_POST['tablename'];

mysql_query("insert into customquestion (voucher_code,email_address,name,question)    VALUES('$voucher_code','$email_address','$name','$question') ");

Upvotes: 0

manuvendev
manuvendev

Reputation: 129

Instead of doing a return false in beforeSend try this

$('form').on('submit',function(e){
   e.preventDefault();
   return false;
});

Upvotes: 0

Arvind Bhardwaj
Arvind Bhardwaj

Reputation: 5291

Better use different strategy: Set a global variable to decide whether or not to submit the form. Then check it while submitting the form.

var canSubmit = 1;

$.ajax({
 beforeSend:function(){
   //disable form
   canSubmit = 0;
},
success:function(){
   //enable form
   canSubmit = 1;
},
complete:function(){
   //disable form
   canSubmit = 1;
});

$('form').on('submit',function() {
   if (!canSubmit) {
      return false;
   }
});

Upvotes: 3

Related Questions