AJAX confirmation

[levandesigns]

First off many thanks to Ben for this script, I've used it before and it makes a beautiful form management tool. I've also recommended it to numerous clients.

This may be a very simple question... and then again this may be impossible given FT's intended purpose.

We are setting up a contact information page on our site here:
michaelaustinproductions.com/contact-us

I've had it working, however we would like to do away with the page change to a static thank you page and simply use an AJAX call to replace the form with a thank you message, keeping the user on the page.

Code:

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone + '&company' + company + '&message' + message;
$.ajax({
type: "POST",
url: "{path to}/process.php?" + "form_tools_initialize_form=1&form_tools_form_id=3&" + dataString,
success: function() {
$('#contact_form_wrap').html("<div id='message'></div>");
$('#message').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$('#message').append("<img id='checkmark' src='images/check.png' />");
});
}
});

The variables in dataString are set to the value of the input boxes, I also originally set the url: to direct simply to the process.php(note the curly braces are edited in, I assure you that the path is correct in the code), and passed data: dataString separately. While setting up the form, the script does not recognize that values are being passed.

I understand this may be far outside the realm of the script, if it is just let me know, and if you know anywhere to get some additional information on the topic that would be greatly appreciated, however google and a search on this site yielded nothing that I could find.

Thank you again for the amazing script, and any help that anyone could provide would be an extreme help.

-Jason

[Ben]

Hey Jason,

Interesting stuff! There's certainly no reason why this shouldn't work - all FT cares about is the POST request, so it can be sent from anywhere - Ajax, Flash, HTML form, a handcrafted HTTP request - anything's fine.

Looking over your code, everything looks perfectly okay except that you'll need to tweak the syntax a little for the POST request. jQuery lets you send GET requests by appending the values to the URL, but POST requests have to be sent by sending them via a "data" property of the anonymous object passed to the $.ajax() function.

In other words, try tweaking your code to this:

Code:

var dataString = 'form_tools_initialize_form=1&form_tools_form_id=3&name='+ name + '&email=' + email + '&phone=' + phone + '&company' + company + '&message' + message;
$.ajax({
  type: "POST",
  data: dataString,
  url: "{path to}/process.php",
  success: function() {
    $('#contact_form_wrap').html("<div id='message'></div>");
    $('#message').html("<h2>Contact Form Submitted!</h2>")
      .append("<p>We will be in touch soon.</p>").hide().fadeIn(1500, function() {
        $('#message').append("<img id='checkmark' src='images/check.png' />");
    });
  }
});

I *think* that should work, but don't quote me...

- Ben

[levandesigns]

Thanks for the reply Ben, I'll give that a shot shortly and let you know how it works out. Very much appreciated

Hey Jason,

Interesting stuff! There's certainly no reason why this shouldn't work - all FT cares about is the POST request, so it can be sent from anywhere - Ajax, Flash, HTML form, a handcrafted HTTP request - anything's fine.

Looking over your code, everything looks perfectly okay except that you'll need to tweak the syntax a little for the POST request. jQuery lets you send GET requests by appending the values to the URL, but POST requests have to be sent by sending them via a "data" property of the anonymous object passed to the $.ajax() function.

In other words, try tweaking your code to this:

Code:

var dataString = 'form_tools_initialize_form=1&form_tools_form_id=3&name='+ name + '&email=' + email + '&phone=' + phone + '&company' + company + '&message' + message;
$.ajax({
  type: "POST",
  data: dataString,
  url: "{path to}/process.php",
  success: function() {
    $('#contact_form_wrap').html("<div id='message'></div>");
    $('#message').html("<h2>Contact Form Submitted!</h2>")
      .append("<p>We will be in touch soon.</p>").hide().fadeIn(1500, function() {
        $('#message').append("<img id='checkmark' src='images/check.png' />");
    });
  }
});

I *think* that should work, but don't quote me...

- Ben