CODEWITHSUNDEEP
javascriptjqueryajaxform-submitpreventdefault
Kautilya Kondragunta
Kautilya Kondragunta

Reputation: 155

Ajax form submit preventDefault() doesnt work

So basically i want to show a loading gif before the content of the page is shown. So i made two divs like this.

<div id="wait"><img src="img/loading.svg" style="width:max-width;height:50px;"></div>
<div id="content"></div>

And i added some javascript to hide the loading gif and show the content as shown below

 $('#content').css('display', 'none');


$(document).ready(function() { setTimeout(function() {
$('#wait').css('display', 'none');
}, 3000);

setTimeout(function() {
$('#content').load('portfolio.html');
}, 3100);});

Now when i do this, the form ajax shown below doesnt work. 

$(document).ready(function() {
//Validate Form Start
var form = $('#form');

form.submit(function(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    console.log(form.serialize());

$.ajax({
    type: 'POST',
    url: form.attr("action"),
    data: form.serialize(),
    success: function(response) {
        console.log("Email Sent.");
        $('.form').html('Message Sent! Await response.');
        $('.form').attr('class', 'btn btn-success btn-lg btn-block form');
        function submitTimeout() {
            $('.form').html('Send Another Message?');
            $('.form').attr('class', 'btn btn-danger btn-lg btn-block form');
        }
        setTimeout(submitTimeout, 3000);
        form.each(function(){
            this.reset();
            });
        }
    });
});
//Validate form end.});

It doesn't use ajax to submit the form . It uses default submission inspite of mentioning preventDefault() method. Any fixes please?

Upvotes: 0

Views: 1149

Answers (2)

Harshit Jain
Harshit Jain

Reputation: 492

Add return false; at the end of your submit function. It will do the trick.

Upvotes: 1

vishva8kumara
vishva8kumara

Reputation: 355

I have found that return false on form.onsubmit event works better than e.preventDefault() for this purpose.

Like this:

form.onsubmit = function(evt){
    ...
    $.ajax({ ...
    ...
    // At the end of the function
    return false;
}

Upvotes: 0

Related Questions