AJAX form submission issues

(Jim Smith) #1
I have a custom form set up and have been trying to get it to submit using AJAX. I have the below code which seems to submit successfully, however I'm not seeing anything show up in the submissions logs for the custom form.
 $(function() {
    $("#contact_form form").submit(function(e) {
      //process form here
      var $form = $(this);
      var urlSend = $form.attr("action");
      var dataSend = $form.serialize();
      var encodingType = $form.attr("enctype");
      $.ajax({
        type: "POST",
        //URL of submit script?
        url: urlSend,
        contentType: encodingType,
        data: dataSend,
        success: function() {
          $('#contact_form').html("<div id='message'></div>");
          $('#message').html("<p>Form Submitted!</p>")
          .hide()
          .fadeIn(1500, function() {
            $('#message').append("<p>Woo</p>");
          });
        }
      });
      e.preventDefault();
    });
  });

The only difference I am able to see between it submitting with/without AJAX is in the headers.

 

without AJAX:

Request Headers
POST ###HTTP/1.1
Host: ###
Proxy-Connection: keep-alive
Content-Length: 680
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Origin: ###
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.99 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary2nTBFksqvDiDGTbX
Referer: ###
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Cookie: _fby_site_=1%7Cact.gov.au%7C1418858226%7C1418858226%7C1418858226%7C1418858226%7C1%7C1%7C1; __utma=213350664.1026509165.1416192371.1422495190.1422508242.2; __utmz=213350664.1422495190.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); __atuvc=0%7C6%2C0%7C7%2C0%7C8%2C0%7C9%2C9%7C10; _gat=1; SQ_SYSTEM_SESSION=bo2dutmpgs4vp96u96ocln1le0; _ga=GA1.3.1026509165.1416192371
Request Payload
------WebKitFormBoundary2nTBFksqvDiDGTbX
Content-Disposition: form-data; name="SQ_FORM_704745_PAGE"
 
1
------WebKitFormBoundary2nTBFksqvDiDGTbX
Content-Disposition: form-data; name="form_email_704745_referral_url"
 
 
------WebKitFormBoundary2nTBFksqvDiDGTbX
Content-Disposition: form-data; name="q704745:q1"
 
11
------WebKitFormBoundary2nTBFksqvDiDGTbX
Content-Disposition: form-data; name="q704745:q2"
 
22
------WebKitFormBoundary2nTBFksqvDiDGTbX
Content-Disposition: form-data; name="q704745:q3"
 
33
------WebKitFormBoundary2nTBFksqvDiDGTbX
Content-Disposition: form-data; name="form_email_704745_submit"
 
Send
------WebKitFormBoundary2nTBFksqvDiDGTbX--

 

 

with AJAX:

 

Request Headers
POST ###HTTP/1.1
Host: ###
Proxy-Connection: keep-alive
Content-Length: 120
Accept: */*
Origin: ###
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.99 Safari/537.36
Content-Type: multipart/form-data
Referer: ###
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Cookie: _fby_site_=1%7Cact.gov.au%7C1418858226%7C1418858226%7C1418858226%7C1418858226%7C1%7C1%7C1; __utma=213350664.1026509165.1416192371.1422495190.1422508242.2; __utmz=213350664.1422495190.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none); __atuvc=0%7C6%2C0%7C7%2C0%7C8%2C0%7C9%2C9%7C10; _gat=1; SQ_SYSTEM_SESSION=bo2dutmpgs4vp96u96ocln1le0; _ga=GA1.3.1026509165.1416192371
Request Payload
SQ_FORM_704745_PAGE=1&form_email_704745_referral_url=&q704745%3Aq1=41241&q704745%3Aq2=412412412412&q704745%3Aq3=53456346
 
I'm assuming it's something to do with the extra content-type and WebKitFormBoundary############## wrapping the posted data, but I'm not sure how to actually add that in?
 
I have been able to get the AJAX submit working using a plugin, but I am hoping to get it working without.
(Nic Hubbard) #2

Have you tried not setting the content type? I know I have done this in the past, and I never remember setting that attribute.

(Jim Smith) #3

Have you tried not setting the content type? I know I have done this in the past, and I never remember setting that attribute.

 

Yeah, originally I tried it without setting the content type, however it still didn't seem to submit properly. I saw your other post re the ajax asset uploader and noticed you didn't set the content type on that.

(Harinder Singh) #4

You can get the idea from the following code which I have used on client's website.

<form id="bulkmail_subscribe_page_1218" action="http : // #### /newsletter/weekly-newslteter-subscriptions" method="post">
<script type="text/javascript">
    $(document).ready(function () {
        function bindSubmit() {
            $('#bulkmail_subscribe_page_1218_submit_button').unbind().click(function (event) {
                event.preventDefault();
                var $form = $(this).closest('form');
                var formAction = $form.attr('action');
                var formData = $form.serialize();
                postForm(formAction, formData);

            });

        } //bind submit

        function postForm(formAction, formData) {

            $.ajax({

                type: “POST”,

                url: formAction,

                data: formData,

                success: function (data) {

                    $(’.subscriptionform’).html($(data).find(’.main-content’).html());

                    $(‘input[type=“submit”]’).before(’<input type=“hidden” name=“bulkmail_subscribe_page_1218_submit_button” value=“Submit” />’);

                    bindSubmit();

                    $.colorbox.resize(innerHeight);

                }

            });

        } // postForm

      //adding hidden input for post and binding submit button

        $(‘input[type=“submit”]’).before(’<input type=“hidden” name=“bulkmail_subscribe_page_1218_submit_button” value=“Submit” />’);

        bindSubmit();

    });

</script>

…

…

</form>
(Jim Smith) #5

Thanks Harinder, I’ll give this a try and see if I can get it working :slight_smile:

(Jim Smith) #6

So I had a look - seems that adding in this line has it working:

$('input[type="submit"]').before('<input type="hidden" name="form_email_704745_submit" value="Submit" />');

Though I'm not exactly sure why!

 

Thanks again Harinder :)

 

For any curious as to the full setup that's currently working -

 

HTML:

Name 
<label for="q704745_q2">Email</label>
<input type="text" name="q704745:q2" value="" size="30" maxlength="300" id="q704745_q2" class="sq-form-field">

<label for="q704745_q3">Phone</label>
<input type="text" name="q704745:q3" value="" size="30" maxlength="300" id="q704745_q3" class="sq-form-field">
  </fieldset>
<input type="submit" name="form_email_704745_submit" value="Submit" class="sq-form-field" id="form_email_704745_submit">
</form></div>

jQuery:

<script type="text/javascript">
  $(function() {
    $("#ajax_form form").submit(function(e) {
    e.preventDefault();
      //process form here
      var $form = $(this);
      var urlSend = $form.attr('action');
      var dataSend = $form.serialize();
      $.ajax({
        type: "POST",
        //URL of submit script?
        url: urlSend,
        data: dataSend,
        success: function() {
          $('#ajax_form').html("<div id='message'></div>");
          $('#message').html("<p>Form Submitted!</p>")
          .hide()
          .fadeIn(1500, function() {
            $('#message').append("<p>Woo</p>");
          });
        }
      });
    });
    $('input[type="submit"]').before('<input type="hidden" name="form_email_704745_submit" value="Submit" />'); 
  });
</script>
(Nic Hubbard) #7

 

So I had a look - seems that adding in this line has it working:

$('input[type="submit"]').before('<input type="hidden" name="form_email_704745_submit" value="Submit" />');

Though I'm not exactly sure why!

 

The submit button var is just a required field, so if it isn't included the POST will fail. I now remember having this issue in the past and finally figured it out too. Sorry that I had not remembered about that!

(Jim Smith) #8

 

The submit button var is just a required field, so if it isn't included the POST will fail. I now remember having this issue in the past and finally figured it out too. Sorry that I had not remembered about that!

 

Aahh I see. That explains it then!

 

So it would work just as well with this then:

  $(function() {
    $("#ajax_form form").submit(function(e) {
    e.preventDefault();
      //process form here
      var $form = $(this);
      var urlSend = $form.attr('action');
      var dataSend = $form.serialize() + "&form_email_704745_submit=Submit";
      $.ajax({
        type: "POST",
        url: urlSend,
        data: dataSend,
        success: function() {
          $('#ajax_form').html("<div id='message'></div>");
          $('#message').html("<p>Form Submitted!</p>")
          .hide()
          .fadeIn(1500, function() {
            $('#message').append("<p>Woo</p>");
          });
        }
      });
    });
  });

Looking back, that's glaringly obvious that it's missing from the AJAX post header, oops!

 

Thanks for explaining that Nic, and no problem :)

 

Thanks again Harinder for helping me get this up and running.