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

Question

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

For those who are having trouble submitting the icontact form via ajax try this:

$.get("https://app.sandbox.icontact.com/icp/signup.php", { listid: "xxx", "specialid:xxx": "xxx",clientid : "xxx",fields_email: 'test@gmail.com' }, function(){

                    alert('email added to the list :)');

            } );

replace xxx with the required parameter :)

Answer 2

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 3

Thanks to for his awnser, made a few changes though, here is what I have

---

<form>
 Email<br />
 <input type="text" name="email" id="email" class="text" /><br />

 First Name<br />
 <input type="text" name="fname" id="fname" class="text" /><br />

 Last Name<br />
 <input type="text" name="lname" id="lname" class="text" /><br />

 <input type="submit" id="submit" onclick="icontact_submit(); return false;"/>
</form>

<script type="text/javascript">
 function icontact_submit()
 {  
 //grab data from data
 var email = $('#email').val();
 var first_name = $('#fname').val();
 var last_name = $('#lname').val();

 //do some validation here

 //if validation pass do this
 $.post("https://app.icontact.com/icp/signup.php", { listid:"xxxxx", "specialid:xxxx":"xxxx", clientid:"xxxxx", fields_email:email, fields_fname:first_name, fields_lname:last_name }, function(){
  alert('email added to the list :)'); //this does not seem to work yet though
 });

 //else validation failed, do some of this

 }
</script>

Answer 4

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 5

See jQuery Ajax.

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

;

Answer 6

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 7

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.