I am trying to submit two forms at the same time using jQuery and ajax. The idea is to optin the email to a separate mailing list which is why 2 forms are needed.
It works for both Chrome and Firefox but not Safari. When I test in Safari it only submits one of the forms.
If anyone has any suggestions that would be a huge help.
My code looks like this:
HTML
<form>
<input id="email-input" type="text" name="email" value="" size="11">
<input type="checkbox" name="newsletter-signup" id="newsletter-signup">
<input id="submit-btn" type="submit" value="SignUp">
</form>
<form id="mailing-list-form">
<input type='hidden' name='email' id="hidden-email" value='' size='10'>
</form>
JS
$('#email-input').change(function() {
$('#hidden-email').val($(this).val());
});
$("#submit-btn").click(function() {
if ($("#newsletter-signup").is(':checked')) {
submitTwoForms();
} else {
//do nothing
}
});
function submitTwoForms() {
var dataObject = $('#mailing-list-form').serialize();
$.ajax({
url: "http://pacmail.em.marketinghq.net/functions/mailing_list.html",
data: dataObject,
type: "GET",
success: function() {
$('form').each(function() {
$(this).submit();
});
}
});
return false; //to prevent submit
}