CODEWITHSUNDEEP
jqueryajaxformspostsubmit
ganjan
ganjan

Reputation: 7576

.submit form info with jquery and return result without reloading

Jquery:

<script type="text/javascript">
$(document).ready(function(){
    $("form.register").change(function() {
        $.post("check.php", $("form.register").serialize(), function( data ) {
            if( data.username == "inuse" )
                $("p#username_error").slideDown();
            else
                $("p#username_error").hide();
            if( data.password == "missmatch" )
                $("p#password_error").slideDown();
            else
                $("p#password_error").hide();
            if( data.email == "notvalid" )
                $("p#email_error").slideDown();
            else
                $("p#email_error").hide();


        }, "json");
    });

    $("form.register").unbind('submit');
    $("form.register").submit(function(e) {
        e.preventDefault();

    //  $.post("register.php", $("form.register").serialize() function( data ) {

        $("p#submit_error").slideDown();

    //  alert("Data Loaded: " + data);
    //  alert("Data Loaded: " + data.submit);

    //  }, "json");

        return false;

        }); 

});
</script>

The code that don't work is the $("form.register").submit(function(){...} part.

This my html:

<form action="register.php" method="post" class="register">
    <fieldset>
        <legend>registration</legend>
        <input type="text" name="username" value="" />
        <label>desired username</label>
        <p id="username_error" class="error">That Username is unavailable</p>
        <input type="password" name="password" value="" />
        <label>password</label>
        <input type="password" name="password_again" value="" />
        <label>password Again</label>
        <p id="password_error" class="error">Passwords do not match</p>
        <input type="text" name="email" value="" />
        <label>email</label>
        <p id="email_error" class="error">Email is not valid</p><br />
        <input type="submit" name="submit" value="register" />
        <p id="submit_error" class="error">test</p>
    </fieldset>
</form>

register.php:

$data = array( "submit" => "test" );
echo json_encode( $data );

I am new to jquery, ajax and javascript. But from my understanding. When I click submit in the register form I submit all the values to register.php that respond with "test". My jquery javasript then execute:

if( data.submit == "test" )
    $("p#submit_error").slideDown();

that should slidedown this info 

<p id="submit_error" class="error">test</p>

But nothing happens when I click submit..

Upvotes: 0

Views: 2196

Answers (2)

PleaseStand
PleaseStand

Reputation: 32082

AJAX stands for Asynchronous JavaScript and XML. That means that $.post will actually return before the response is received (a callback function is later asynchronously called when it is). Therefore, the form is submitted immediately.

To stop this, insert return false; at the end of the submit event handler, which will stop the form submission. When the response arrives, decide if you want to submit the form the normal way. This code can be used to do so:

// Unbind the submit event handler registered earlier
// so we do not make another AJAX request
$("form.register").unbind('submit');

// Actually submit the form
$("form.register").submit();

Of course, if you don't need to, you don't need the latter code.

Note: One thing I would recommend is disabling the button during the AJAX request. This will ensure that when a user unnecessarily tries to "double-click" the button, that will have no adverse effect. One way to do this is using jQuery's .one method, which also avoids the need to use unbind:

function submitButtonClicked() {
    $.post(..., function( data ) {

        ...

        // Submit form if data is valid
        $("form.register").submit();

        // Re-enable button if form was not submitted
        $("form.register").one('submit', submitButtonClicked);

    }, "json");

    // Cancel form submission
    return false;
}

$("form.register").one('submit', submitButtonClicked);

Upvotes: 1

meder omuraliev
meder omuraliev

Reputation: 186602

You need to make sure data.submit exists and the value equals "test". Try using alert/console.log.

EDIT: Had another look. Try amending your code like this:

$("form.register").submit(function(e) {
        e.preventDefault();
        $.post("register.php", $("form.register").serialize(), function( data ) {
            if( data.submit == "test" )
                $("p#submit_error").slideDown();
        }, "json");
    });

Upvotes: 0

Related Questions