使用AJAX提交的Webform生成错误

时间:2011-11-03 00:28:18

标签: javascript jquery html ajax forms

我已经将AJAX表单提交到我的webforms之前没有问题,但现在我无法让它工作,我不确定为什么但我想知道因为我在页面上有两个表单并且都使用AJAX并且想知道这是否导致了冲突?每个表单都有不同的ID,所以我不知道此时该怎么做。

使用一个表单我收到此错误:

catwebformform47021 is not a function 

另一个生成AJAX错误消息并且:

catwebformform19089 is not a function

我在这里缺少什么?

这里有很多代码:

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>&nbsp;</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>&nbsp;</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 &amp; 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&amp;OID={module_oid}&amp;OTYPE={module_otype}&amp;EID={module_eid}&amp;CID={module_cid}&amp;CC={module_urlcountrycode}&amp;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>&nbsp;</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&amp;OID={module_oid}&amp;OTYPE={module_otype}&amp;EID={module_eid}&amp;CID={module_cid}&amp;CC={module_urlcountrycode}&amp;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>&nbsp;</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>

感谢您的帮助。这里是完整代码的网站 - 由于字符限制,我无法将其全部粘贴在这里... http://tinyurl.com/3rgb3jg

1 个答案:

答案 0 :(得分:2)

听起来你有问题:

...onclick="return catwebformform47021(document.catwebformform47021);"...

我认为您的onclick或onsubmit代码应该引用您在此处定义的函数:

...function checkWholeForm19089(theForm)...

不确定这是否是一个完整的答案,但它可能有助于您进入下一个故障排除步骤。