Why won't this form submit with AJAX?

Question

I'm trying to submit a form to Campaign Monitor. They offer this code example to POST via Ajax.

This is my code for my multi-step modal.

 var next_step = false; var final_step = false; $('.next').on('click', function(e){ e.preventDefault(); if (next_step) { $('#step-1').slideUp(function(){ $('#step-2').slideDown(); $('.next').html('Submit');// Change button text to submit final_step = true; }); } next_step = true; if (final_step) { $('#myform').submit(function (e){ alert('submit started'); //This never fires unless I remove the preventDefault(); e.preventDefault();//But if I remove this, the page will refresh $.getJSON( this.action + "?callback=?", $(this).serialize(), function (data) { if (data.Status === 400) { alert('error'); } else { alert('success'); } }) }); } });

On the last step of the form, I check whether final_step is true, if so, go ahead and submit the form via ajax.

The problem is that it just doesn't do anything? But if I remove the e.preventDefault(); from the $('#myform') it will post the form as normal and re-direct you to the form URL.

How can I fix this?

remove if (data.Status === 400) { condition and check response existance — Maxx
– Maxx, Commented Aug 16, 2016 at 14:30
getJSON will issue a GET request rather than a POST. To issue a POST request you might want to use $.ajax or $.post with JSONP parametrization — devnull69
– devnull69, Commented Aug 16, 2016 at 14:35
I can't because the script doesn't even get that far. Please see the updated question and see my comments next to the alert in the submit part. — ProEvilz
– ProEvilz, Commented Aug 16, 2016 at 14:38
I'm using ?callback=? because it's the code that was provided by Campaign Monitor. You can see the gist by clicking the link at the top of the page. — ProEvilz
– ProEvilz, Commented Aug 16, 2016 at 14:38

ListenFirst · Accepted Answer · 2016-08-16 14:54:08Z

What you are doing currently is wiring up an onsubmit handler. Not invoking submit.

 $('#myform').submit(function (e){ });

...is the same thing as...

<form action="#" method="post" onsubmit="return someFunction()">

... which is the same as ...

$('#myForm').on('submit', function(e){});

You are never submitting the form.

What you are looking for is to use Ajax to post the data to the server and not submit the form.

You can do that like this:

$.ajax({ type: "POST", url: "SomeUrl.aspx", data: dataString, success: function() { //display message back to user here } });

dataString would be replaced with the values you posting.

ADyson · Accepted Answer · 2016-08-16 14:53:35Z

 $('#myform').submit(function (e){

just registers an event handler and attaches it to the "submit" event of "myform", it doesn't actually cause a submit. It means you're saying you'd like this function to be run every time the form is submitted. This handler function should be outside your $('.next').on('click', function(e){ block. Just below it will do.

If, within the $('.next').on('click', function(e){ block you wish to cause the form to be submitted, write:

$('#myform').submit();

This will actually trigger the form submission.

See https://api.jquery.com/submit/ for more info on what the different method signatures of "submit" actually do.

Glubus · Accepted Answer · 2016-08-16 14:36:07Z

This line: $('#myform').submit(function (e) { registers the function you pass as an argument as a handler to the submit event of the form, and does not invoke a submit action. I'm not sure whether or not this is the problem, though I would recommend preventDefault() outside of the wizard flow

(e.g.

$(document).ready(function() { $("#form").submit(function(e) { e.preventDefault(); } });

)

Then inside the if(final_step) just do the post without worrying about the form.

Also, you'd do good in not setting a submit button inside the form if you do not wish to use it's functionality. Just create an element with a click event that sends the data rather than registering to the submit event of the form.

I do not use an input of type submit for the button but rather a standard anchor tag with a jquery .on('click');. According to your explanation, would it not be better to post the form and use a .on('submit') to prevent the page refresh instead of .submit(); ?
You could create a button on the last page that submits the form, and then do all the posting stuff in the submit event of the form. Though it's key to realise that this call: $('#myform').submit(function (e){ (and the rest of the scope) does not invoke the submit function of the form, and only registers the given function as a handler to the form. I recommend removing this line, and just execute all that is inside the function you pass to $.submit() in the if(final_step) clause. Also, you're declaring event e twice (in $.click() and $.submit())
Also, you say the alert() is called, while you also now claim that there is no element that invokes the $.submit() event of the form. So there's something fishy going on there as well, as it's impossible for the alert() to be executed if #form is not submitted.

ventaquil · Accepted Answer · 2016-08-16 14:49:24Z

I'm not sure but I always do $('#form').submit() after click in element and catch this event (e.g. by $('#form').on('submit', function () { .. });) in other place.

Collectives™ on Stack Overflow

Why won't this form submit with AJAX?

4 Answers 4

Comments

Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Related