CODEWITHSUNDEEP
javascriptjqueryforms
Dusan
Dusan

Reputation: 3478

How do I submit a form using jQuery after AJAX validation?

My form has one input which needs to be validated before submitting. After a successful validation I try to submit the form, but it doesn't submit.

My code looks like this:

$(document).ready(function() {
    $("#myForm").submit(function () {
        checkInputData();
        return false;  // to prevent default submit
    });
});

The validation function:

function checkInputData() {
    var id = $($("#id")).val();  // value, which needs to be validated
    $.get("check.php?id=" + id,  
        function(result){  
            if(result == 1) {  
                //if the result is 1, need to submit
                $("#myForm").unbind(); // to prevent recursion?
                $("#myForm").submit(); // doesnt work
            } else {  
                // dont submit, give some visual feedback, etc...
            }  
    });
}

What am i doing wrong? Thanks.

Upvotes: 1

Views: 9789

Answers (4)

Tomas Santos
Tomas Santos

Reputation: 550

AMember is correct your always returning false, there are a few solution. One solution is for you to bind your validation to a button element or any element that will not submit the form.

HTML

<form id="myForm">
   .
   input elements
   .
   <button class= "submit" type="button" onclick="submit">Submit</button>
</form>

Document Ready

$(function() 
{
   var $submit = $(".submit");

   $submit.click(function () 
   {
     checkInputData();

   });
});

Validation Callback Function 

function checkInputData() 
{
   var id = $('#id').val();  // value, which needs to be validated

   $.get("check.php?id=" + id, function(result)
   {  
        if(result == 1) 
        {
           var $myForm = $("#myForm");

            //if the result is 1 submit.
            $myForm.submit();
        } 
        else 
        {  
            // dont submit, give some visual feedback, etc...
        }  
   });

}

Upvotes: 0

Scott
Scott

Reputation: 21501

You need to return the result from your AJAX validation request. You can do this by setting this check to being async: false, this means the checkInputData() will wait for the result to come back, and you can return it, controlling the submission of the form.

In your code it's not waiting for the $.get action to happen, and it appears to skip over meaning your code will always appear to return true; from the checkInputData() call. You don't need to return false in submit, if used as below.

I have used the $.ajax call in place of $.get because it allows you to control the async property, but it essentially does the same thing. You can read more about it here.

function checkInputData() {
    var value = $("#id").val();  // Value to be validated
    var passedValidation = false;
    $.ajax("check.php?id=" + value, {
        async: false,
        success: function(result){
            // Do whatever check of the server data you need here.
            if(result == "1") {  
                // Good result, allow the submission
                passedValidation = true;
            } else {
                // Show an error message
            }
        }
    });
    return passedValidation;
}

$(document).ready(function() {
    $("#myForm").on("submit", function () {
        return checkInputData();
    });
});

I assume you have a button such as below, within your form with id myForm:

<input type="submit" value="Submit Form" />

Upvotes: 4

Manoj Yadav
Manoj Yadav

Reputation: 6612

It's not getting submitted may be because you are not returning 1 on successful validation for result in below if condition

if(result == 1) {

In check.php your output should be 1, like echo '1'; if input is valid. And make sure there is not any other output before or after it.

Upvotes: 0

Manak Kapoor
Manak Kapoor

Reputation: 982

       $(document).ready(function() {
            $("#myForm").submit(function (e) {
                checkInputData();
                //return false;  // to prevent default submit <-- THIS IS WRONG


                e.preventDefault(); //Try this :)
            });
        });

Returning false will prevent it from submitting in all cases.

Upvotes: -1

Related Questions