ajax jquery submit with icontact form

Question

I am trying to use Ajax with icontact.. my code makes the form submit however it shows an error message, despite the form working and the details dropping into the list.

$('.error').hide();
$('.erroremail').hide();
$('#successcontainer').hide();
function verifyRequired()
{ 
    var eReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; // regex to check valid email
    var email = $('input[name="fields_email"]').val();
    var name = $('input[name="fields_fname"]').val();
    var phone = $('input[name="fields_phone"]').val();
    var data = $("#form-popup").serialize()

    if (email == "") {
        $('input[name="fields_email"]').focus();
        $('.error').show();
        return false;
    } else if (!eReg.test(email)) {
        $('input[name="fields_email"]').focus();
        $('.erroremail').show();
        return false;
    }
    else if (name == "") {
        $('input[name="fields_name"]').focus();
        $('.error').show();
        return false;
    }
    else if (phone == "") {
        $('input[name="fields_phone"]').focus();
        $('.error').show();
        return false;
    }
    else {
        $.ajax({
            url: "https://app.icontact.com/icp/signup.php", 
            type: "POST",
            data: data,
            success: function(){
                alert('success')
            },
            error: function(){
                alert('failure')
            },
        });
        return false;
    }
}

So the form is submitting the details fine, but showing the failure message?

So i'm almost there, anyone know why?

Cheers

here is the form also

<form id="form-popup" method="post" action="" name="icpsignup" accept-charset="UTF-8" onsubmit="return verifyRequired();" >
    <input type="hidden" name="redirect" value="http://www.icontact.com/www/signup/thanks.html">
    <input type="hidden" name="errorredirect" value="http://www.icontact.com/www/signup/error.html">
    <input type="text" name="fields_fname" class="input" id="name" placeholder="Full Name" />
    <input type="text" name="fields_email" class="input" id="email" placeholder="Email Address" />
    <input type="text" name="fields_phone" class="input" id="phone" placeholder="Telephone" />
    <input type="submit" id="submit" />

    <input type="hidden" name="listid" value="xxxxxxx">
    <input type="hidden" name="specialid:xxxxx" value="xxxx">
    <input type="hidden" name="clientid" value="xxxxxx">
    <input type="hidden" name="formid" value="xxxx">
    <input type="hidden" name="reallistid" value="1">
    <input type="hidden" name="doubleopt" value="0">
</form>

Answer 1

I have run your code in my local server and I have not found any syntax errors.

The problem I face with using your code is "Cross-Origin Request Blocked".

Browsers do not allow AJAX requests to another domain, if you try to use the form on the site app.icontact.com (or maybe icontact.com) it will work.

If you cannot use icontact.com for the form then I suggest you write a PHP code (which is the server side language in our case) to process jsonp. This is a workaround for cross-origin policy.

Add dataType: jsonp to $.ajax

$.ajax({
    url: "https://app.icontact.com/icp/signup.php", 
    type: "POST",
    dataType: "jsonp",
    data: data,
    success: function(){
        alert('success')
    },
    error: function(){
        alert('failure')
    },
})

Executing the above code gave me a syntax error from signup.php, so I am assuming processing the jsonp correctly will get you the success alert.