I have implemted AJAX form submission into my webforms before without issue but now I cannot get it to work and I am unsure why but I wonder because I have two forms on the page and both use AJAX and wonder if this is causing the conflict? The forms each have a different ID so I am not sure what to do at this point.
With one form I get this error:
catwebformform47021 is not a function
The other generates the AJAX Error Message and:
catwebformform19089 is not a function
What am I missing here?
There is alot of code here it goes:
JS
<script type="text/javascript">
//AJAX for E-Mail Only
function jqsub() {
var $j = jQuery.noConflict();
var $jform = $j('#ajaxform-email'); // form ID
var $jmessagebox = $j('#ajaxdiv-email'); // message box ID
var $jsuccessmessage = "<h3>Thank You for Signing Up!</h3><p> </p><p>Please follow the <a href='/email/setup/'>steps found here</a> to ensure proper delivery of SunBytes.</p><p>If you have any questions please <a href='/contactus'>contact us</a>.</p>"; // success message in HTML format
var $jerrormessage = "<h3>Error - Please Try Again</h3><p class='light_button' id='errorbutton'>Return to Form </p><p>Please Note: You may have to refresh your page before you can submit the form again. We apologize for any inconvenience. </p><p>If the error continues please contact us at <a href='mailto:support@ubhape2.com'>Support@mysite.com</a></p>"; //error message in HTML format
$j.ajax({
type: 'POST',
url: $jform.attr('action'),
data: $jform.serialize(),
success: function (msg) {
if (msg.FormProcessV2Response.success) {
$jmessagebox.append($jsuccessmessage)
$jmessagebox.fadeIn();
}
else {
$jmessagebox.append($jerrormessage)
$jmessagebox.fadeIn();
}
},
error: function (msg) {
$jmessagebox.append($jerrormessage)
$jmessagebox.fadeIn();
},
});
$jform.fadeOut("slow", function(){ //fade out of form after success
$jmessagebox.fadeIn("slow");
});
$j("#errorbutton").live('click',function(){ //allows form to be faded in, in the event of an error
$jmessagebox.fadeOut("slow", function(){
$jform.fadeIn("slow");
});
});
}
</script>
<script type="text/javascript">
//AJAX for Text Message and E-Mail
function jqsub() {
var $j = jQuery.noConflict();
var $jform = $j('#ajaxform-text'); // form ID
var $jmessagebox = $j('#ajaxdiv-text'); // message box ID
var $jsuccessmessage = "<h3>Thank You for Signing Up!</h3><p> </p><p>Please follow the <a href='/email/setup/'>steps found here</a> to ensure proper delivery of SunBytes.</p><p>If you have any questions please <a href='/contactus'>contact us</a>.</p>"; // success message in HTML format
var $jerrormessage = "<h3>Error - Please Try Again</h3><p class='light_button' id='errorbutton'>Return to Form </p><p>Please Note: You may have to refresh your page before you can submit the form again. We apologize for any inconvenience. </p><p>If the error continues please contact us at <a href='mailto:support@mysite.com'>Support@UBhapE2.com</a></p>"; //error message in HTML format
$j.ajax({
type: 'POST',
url: $jform.attr('action'),
data: $jform.serialize(),
success: function (msg) {
if (msg.FormProcessV2Response.success) {
$jmessagebox.append($jsuccessmessage)
$jmessagebox.fadeIn();
}
else {
$jmessagebox.append($jerrormessage)
$jmessagebox.fadeIn();
}
},
error: function (msg) {
$jmessagebox.append($jerrormessage)
$jmessagebox.fadeIn();
},
});
$jform.fadeOut("slow", function(){ //fade out of form after success
$jmessagebox.fadeIn("slow");
});
$j("#errorbutton").live('click',function(){ //allows form to be faded in, in the event of an error
$jmessagebox.fadeOut("slow", function(){
$jform.fadeIn("slow");
});
});
}
</script>
<script type="text/javascript">
//Script for Choosing which form to display
var $j = jQuery.noConflict();
$j("#email-button, #text-button").live('click',
function(){
//figure out what button was clicked.
if(this.id === "email-button"){
var btnA = $j(this);
var btnB = $j("#text-button");
var divA = $j('#email-form');
var divB = $j('#text-form');
}
else{
btnA = $j(this);
btnB = $j("#email-button");
divA = $j('#text-form');
divB = $j('#email-form');
}
//make sure it is not already active, no use to show/hide when it is already set
if(btnA.hasClass('dark_button')){
return;
}
//see if div is visible, if so hide, than show first div
if(divB.is(":visible")){
divB.fadeOut("slow", function(){
divA.fadeIn("slow");
});
}
else{//if already hidden, just show the first div
divA.fadeIn("slow");
}
//Add and remove classes to the buttons to switch state
btnA.addClass('dark_button_fw').removeClass('light_button_fw');
btnB.removeClass('dark_button_fw').addClass('light_button_fw');
}
);
</script>
HTML
<p><a href="#email-button" class="light_button_fw" id="email-button">E-Mail Only</a> <a href="#text-button" class="light_button_fw" id="text-button"> Cell Phone & E-Mail</a> </p>
<div id="email-form" class="hide">
<div id="ajaxdiv-email"></div>
<form class="form" id="ajaxform-email" action="https://mysite.worldsecuresystems.com/FormProcessv2.aspx?WebFormID=51853&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}&CC={module_urlcountrycode}&JSON=1" enctype="multipart/form-data" onsubmit="return checkWholeForm47021(this)" method="post" name="catwebformform47021">
<table class="webform" cellspacing="0" cellpadding="2" border="0" style="width: 650px;">
<tbody>
<tr>
****WEBFORM CODE UNRELATED****
<tr>
<td style="padding-left: 180px;">
<input class="light_button custom_button" type="submit" name="catwebformform47021" onclick="return catwebformform47021(document.catwebformform47021);" value="Subscribe" style="width: 120px; float: left;" />
<p> </p>
<p class="disclaimer">By clicking "Subscribe", you certify that you are at least 13 years old, and agree to our
<a href="/privacy" target="_blank">Privacy Policy</a> and <a href="/terms" target="_blank">Terms of Service</a>. Having trouble? <a href="/contactus">Contact Us</a>. </p>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
<script type="text/javascript">
//<![CDATA[
var submitcount47021 = 0;function checkWholeForm47021(theForm){var why = "";if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name");if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name"); if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value); if (theForm.Username) why += isEmpty(theForm.Username.value, "Username"); if (theForm.Password && theForm.PasswordConfirm) { why += isEmpty(theForm.Password.value, "Password"); why += isEmpty(theForm.PasswordConfirm.value, "Confirm Password"); if (theForm.Password.value != theForm.PasswordConfirm.value) why += appendBreak("- Password and its confirmation do not match."); if (theForm.Password.value.length < 6) why += appendBreak("- Password must be 6 characters or longer."); } if (theForm.BillingAddress) why += isEmpty(theForm.BillingAddress.value, "Billing Address"); if (theForm.BillingCity) why += isEmpty(theForm.BillingCity.value, "Billing City"); if (theForm.BillingState) why += isEmpty(theForm.BillingState.value, "Billing State"); if (theForm.BillingZip) why += isEmpty(theForm.BillingZip.value, ""); if (theForm.BillingCountry) why += checkDropdown(theForm.BillingCountry.value, "Billing Country"); if (theForm.CellPhone) why += isEmpty(theForm.CellPhone.value, "Cell Phone Number"); if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) { if (theForm.CardName) why += isEmpty(theForm.CardName.value, "Name on Card"); if (theForm.CardNumber) why += isNumeric(theForm.CardNumber.value, "Card Number"); if (theForm.Amount) why += isCurrency(theForm.Amount.value, "Amount"); } if (theForm.CaptchaV2) why += captchaIsInvalid(theForm, "Enter Word Verification in box below", "Please enter the correct Word Verification as seen in the image"); if (theForm.CAT_Custom_303047) why += isEmpty(theForm.CAT_Custom_303047.value, "Verify Email Address");if (theForm.CAT_Custom_303048) why += checkSelected(theForm.CAT_Custom_303048, "Choose Your Method of Receiving SunBytes");if (theForm.CAT_Custom_303049) why += checkSelected(theForm.CAT_Custom_303049, "Can Your Phone Receive Picture/MMS messages?");if (theForm.CAT_Custom_303050) why += checkSelected(theForm.CAT_Custom_303050, "I Agree to the Terms of Use.");if(why != ""){alert(why);return false;}if(submitcount47021 == 0){submitcount47021++;jqsub();return false;}else{alert("Form submission is in progress.");return false;}}
//]]>
</script></form>
</div>
<div id="text-form" class="hide">
<div id="ajaxdiv-text"></div>
<form class="form" id="ajaxform-text" action="https://mysite.worldsecuresystems.com/FormProcessv2.aspx?WebFormID=45933&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}&CC={module_urlcountrycode}&JSON=1" enctype="multipart/form-data" onsubmit="return checkWholeForm19089(this)" method="post" name="catwebformform19089">
<table class="webform" cellspacing="0" cellpadding="2" border="0" style="width: 650px;">
***WEBFORM CODE UNRELATED***
<tr>
<td style="padding-left: 180px;">
<input class="light_button custom_button" type="submit" name="catwebformform19089" onclick="return catwebformform19089(document.catwebformform19089);" value="Subscribe" style="width: 120px; float: left;" />
<p> </p>
<p class="disclaimer">By clicking "Subscribe", you certify that you are at least 13 years old, and agree to our
<a href="/privacy" target="_blank">Privacy Policy</a> and <a href="/terms" target="_blank">Terms of Service</a>. Having trouble? <a href="/contactus">Contact Us</a>. </p>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>
<script type="text/javascript">
//<![CDATA[
var submitcount19089 = 0;function checkWholeForm19089(theForm){var why = "";if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name");if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name"); if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value); if (theForm.Username) why += isEmpty(theForm.Username.value, "Username"); if (theForm.Password && theForm.PasswordConfirm) { why += isEmpty(theForm.Password.value, "Password"); why += isEmpty(theForm.PasswordConfirm.value, "Confirm Password"); if (theForm.Password.value != theForm.PasswordConfirm.value) why += appendBreak("- Password and its confirmation do not match."); if (theForm.Password.value.length < 6) why += appendBreak("- Password must be 6 characters or longer."); } if (theForm.BillingAddress) why += isEmpty(theForm.BillingAddress.value, "Billing Address"); if (theForm.BillingCity) why += isEmpty(theForm.BillingCity.value, "Billing City"); if (theForm.BillingState) why += isEmpty(theForm.BillingState.value, "Billing State"); if (theForm.BillingZip) why += isEmpty(theForm.BillingZip.value, ""); if (theForm.BillingCountry) why += checkDropdown(theForm.BillingCountry.value, "Billing Country"); if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) { if (theForm.CardName) why += isEmpty(theForm.CardName.value, "Name on Card"); if (theForm.CardNumber) why += isNumeric(theForm.CardNumber.value, "Card Number"); if (theForm.Amount) why += isCurrency(theForm.Amount.value, "Amount"); } if (theForm.CaptchaV2) why += captchaIsInvalid(theForm, "Enter Word Verification in box below", "Please enter the correct Word Verification as seen in the image"); if (theForm.CAT_Custom_254823) why += isEmpty(theForm.CAT_Custom_254823.value, "Verify Email Address");if (theForm.CAT_Custom_254824) why += isEmpty(theForm.CAT_Custom_254824.value, "Cell Phone Number");if (theForm.CAT_Custom_254825) why += checkSelected(theForm.CAT_Custom_254825, "Choose Your Method of Receiving SunBytes");if (theForm.CAT_Custom_254826) why += checkSelected(theForm.CAT_Custom_254826, "Can Your Phone Receive Picture/MMS messages?");if (theForm.CAT_Custom_254827) why += checkSelected(theForm.CAT_Custom_254827, "I Agree to the Terms of Use.");if (theForm.SZMembership) why += checkSelected(theForm.SZMembership, "Membership Options");if(why != ""){alert(why);return false;}if(submitcount19089 == 0){submitcount19089++;jqsub();return false;}else{alert("Form submission is in progress.");return false;}}
//]]>
</script></form>
</div>
Thanks for any help. Here is the site for full code – I could not paste it all here because of character restrictions…http://tinyurl.com/3rgb3jg
Sounds like you have a problem here:
I think your onclick or onsubmit code should be referring to your function, which you defined here:
Not sure if this is a complete answer but it might help you get to the next troubleshooting step.