How do I submit a form using jquery (ajaxForm plugin) to an external site but not reload to a different page?

Question

Hi,

I'm trying to create a form that sends the customer's name and email address to icontact (an email list application).

All the values are correct for icontact and if I submit the form as usual, icontact responds that it added the email address. The success message loads in a new page from icontact's website.

What I'd like to accomplish is that ajax would send the form and returns a success message within the current page, without sending the customer to a new page.

Here is the test page: http://www.skhot.com/test/js-test/forms/index.php

Answer 1

One option will be to get rid of the form having a submit button, instead using a button and having a JavaScript onClick handler. In the onClick handler, you should use AJAX to send the data in the form in a POST request, and then capture the response. When you get the response, use jQuery to modify whatever div form you want to modify, or do a redirect, or whatever.

I think the real issue is, form submission by default just always loads that new page in the action attribute of the form tag, so you can't rely on an HTML form submission method.

There might be other, more efficient ways (especially using jQuery, which I don't know all that well), but the algorithm I've proposed should work.

Answer 2

See jQuery Ajax.

$.ajax({
   type: "POST",
   url: "some.php",
   data: $("#idform").serialize(),
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
 })

;

Answer 3

Ajax can submit the form but showing up a success message is tricky.

See this JQuery AJAX post method

set the type parameter as 'html'.

You specify a callback function that can parse and display the response from the iContact server.

Answer 4

In your case, I think:

preventDefault will prevent the submit button's normal behaviour, which is to follow the form's action URL.

$('#frmSubmit').click(function(e) {
    e.preventDefault();
}

If that doesn't work, you can try returning false in the success function:

$('#change-form')
   .jqTransform()
   .validate({
     submitHandler: function(form) {
       $(form).ajaxForm({
            success: function() {
                $('#change-form').hide();
                $('#frmWrap').append("<p class='thanks'>Thanks! Your request has been sent.</p>")
                return false;
                }
           });
         }
       });

EDIT: Another thing you can try is attaching 'return false' the onsubmit event:

<form method=post action="https://app.icontact.com/icp/signup.php" name="icpsignup" accept-charset="UTF-8" id="change-form" onsubmit="return false;">

Answer 5

I took icontact out of the equation and the everything worked as planed. So the problem is NOT the code but how icontact handles their php. I'll have to get in touch with them for a real solution.

Thanks everyone for helping and providing advice! My troubleshooting wouldn't have worked with out you.

Answer 6

Scott! Did you ever find a solution to this? I'm trying to do the same thing. iContact seems to not respond to an ajax post...?!?!?!

Answer 7

Scott!! did you find a solution? I am trying to do the same exact thing. Please help.