CODEWITHSUNDEEP
javascriptjqueryajaxforms
ProEvilz
ProEvilz

Reputation: 5455

Why won't this form submit with AJAX?

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?

Upvotes: 0

Views: 267

Answers (4)

ListenFirst
ListenFirst

Reputation: 139

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.

Upvotes: 1

ADyson
ADyson

Reputation: 61914

            $('#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.

Upvotes: 1

ventaquil
ventaquil

Reputation: 2848

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.

Upvotes: 0

Glubus
Glubus

Reputation: 2855

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.

Upvotes: 0

Related Questions