CODEWITHSUNDEEP
javascriptjqueryajaxforms
Jiggles
Jiggles

Reputation: 73

Issue with preventDefault. Submitting form

I have created this jQuery AJAX script for submitting a form:

$(document).ready(function() {

    // process the form
    $('#reviewForm').submit(function(e) {

        $("#reviewError").hide();
        $("#reviewSuccess").hide();

        var formData = {
            'name'              : $('input[name=name]').val(),
            'email'             : $('input[name=email]').val(),
            'description'   : $('input[name=description]').val(),
            'one'           : $('input[name=price]').val(),
            'two'           : $('input[name=location]').val(),
            'three'             : $('input[name=staff]').val(),
            'four'          : $('input[name=service]').val(),
            'five'          : $('input[name=products]').val(),
            'shopID'            : $('input[name=shopID]').val()
        };

        // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : 'post/review.php', // the url where we want to POST
            data        : formData, // our data object
            dataType    : 'json', // what type of data do we expect back from the server
            encode      : true
        })
            // using the done promise callback
            .done(function(data) {

                if ( ! data.success) {

                    $("#reviewError").show();

                } else {

                    // ALL GOOD! just show the success message!
                    $("#reviewSuccess").show();

                }
            })

        // stop the form from submitting the normal way and refreshing the page
        e.preventDefault();
    });

});

Sadly the form submits though the normal way and not though the AJAX. Im at a loss to what the issue can be. I have tried the return false and such but that didn't work at all.

Upvotes: 0

Views: 68

Answers (2)

user5296864
user5296864

Reputation: 

$(document).ready(function() {

    // process the form
    $('#reviewForm').click(function(e) {

        $("#reviewError").hide();
        $("#reviewSuccess").hide();

        var formData = {
            'name'              : $('input[name=name]').val(),
            'email'             : $('input[name=email]').val(),
            'description'   : $('input[name=description]').val(),
            'one'           : $('input[name=price]').val(),
            'two'           : $('input[name=location]').val(),
            'three'             : $('input[name=staff]').val(),
            'four'          : $('input[name=service]').val(),
            'five'          : $('input[name=products]').val(),
            'shopID'            : $('input[name=shopID]').val()
        };

        // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : 'post/review.php', // the url where we want to POST
            data        : formData, // our data object
            dataType    : 'json', // what type of data do we expect back from the server
            encode      : true
        })
            // using the done promise callback
            .done(function(data) {

                if ( ! data.success) {

                    $("#reviewError").show();

                } else {

                    // ALL GOOD! just show the success message!
                    $("#reviewSuccess").show();

                }
            })

        // stop the form from submitting the normal way and refreshing the page
        e.preventDefault();
    });

});

Use 'Click' event instead of 'Submit' will work definatly

Upvotes: 0

SarathSprakash
SarathSprakash

Reputation: 4624

I think you are missing e.preventDefault(); at the begining of the submit(); and to use e.

$(document).ready(function(e) {

    // process the form
    $('#reviewForm').submit(function(e) {
         e.preventDefault();
        $("#reviewError").hide();
        $("#reviewSuccess").hide();

        var formData = {
            'name'              : $('input[name=name]').val(),
            'email'             : $('input[name=email]').val(),
            'description'   : $('input[name=description]').val(),
            'one'           : $('input[name=price]').val(),
            'two'           : $('input[name=location]').val(),
            'three'             : $('input[name=staff]').val(),
            'four'          : $('input[name=service]').val(),
            'five'          : $('input[name=products]').val(),
            'shopID'            : $('input[name=shopID]').val()
        };

        // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : 'post/review.php', // the url where we want to POST
            data        : formData, // our data object
            dataType    : 'json', // what type of data do we expect back from the server
            encode      : true
        })
            // using the done promise callback
            .done(function(data) {

                if ( ! data.success) {

                    $("#reviewError").show();

                } else {

                    // ALL GOOD! just show the success message!
                    $("#reviewSuccess").show();

                }
            })

    });

});

Hope this Helps.

Upvotes: 0

Related Questions