javascript - 显示弹出窗口后提交功能不起作用

Question

我正在制作一份捐赠表格，我们正在尝试创建一个弹出窗口来鼓励人们每月捐赠而不是一次性捐赠。逻辑如下:

1. 用户提交捐款表格
2. 如果选中每月捐款复选框，则不会显示弹出窗口
3. 如果未选中每月捐款复选框，则会检查捐款金额
4. 如果礼物超过 500 美元，则不会显示弹出窗口，并通过名为 SubmitForm() 的函数提交表单。这非常有效。
5. 弹出窗口会向所有其他用户显示。它包括两个按钮，一个将他们的礼物更改为每月一次，另一个按钮将他们的捐赠作为他们最初输入的一次性礼物提交。
6. 如果用户选择不想每月赠送礼物，则会调用 SubmitForm() 函数。
7. 如果用户选择每月赠送礼物，则代码会更改表单，以便选中每月复选框并将金额更改为较低的金额。然后调用submitForm()函数。

我遇到的问题是，如果金额超过 500 美元，submitForm() 函数就会正常工作。但是，如果向用户显示弹出窗口，则表单将不会提交。它关闭弹出窗口，似乎重新加载页面，但实际上并未提交表单。有谁知道为什么会发生这种情况？仅供引用，我还没有对弹出窗口进行任何样式设置，现在我只是想让按钮正常工作。

该表格可以在这里找到:http://support.ddfl.org/site/Donation2?df_id=9562&mfc_pref=T&9562.donation=form1

请注意，您无需捐款即可测试该表格。输入金额并按捐赠按钮。完成上述步骤后，它应该尝试提交表单并通知您尚未填写处理表单所需的字段。

这是 JavaScript:

<script>
jQuery.noConflict();

var amount;
var monthlyDonation;

jQuery('#ProcessForm').submit(function(event){

     //Check if monthly donation box is checked - if not prevent submit
     if(document.getElementById('level_standardauto_repeatname').checked == false){
          event.preventDefault();

          var actualVal = jQuery('input[name=level_standardexpanded]:checked').attr('id');

          if(actualVal=="level_standardexpanded11710"){
               amount = 1000;
          } else if(actualVal=="level_standardexpanded11711"){
               amount = 500;
          } else if(actualVal=="level_standardexpanded11712"){
               amount = 250;
          } else if(actualVal=="level_standardexpanded11704"){
               amount = 100;
          } else if(actualVal=="level_standardexpanded11713"){
               amount = 55;
          } else if(actualVal=="level_standardexpanded11714"){
               amount = 35;
          } else{
               amount = document.getElementById('level_standardexpanded11703amount').value;
          }        


          //If amount is greater than 500 do not show lightbox and submit form
          if(amount>=500){          
               submitForm();
          }
          //If amount is between 400 and 499.99 show lightbox - make monthly gift 75
          if(amount>=400 && amount<= 499.99){
               monthlyDonation = 75;
               showLightbox(monthlyDonation);
          }
          //If amount is between 200 and 399.99 show lightbox - make monthly gift 50
          if(amount>=200 && amount<=399.99){
               monthlyDonation = 50;
               showLightbox(monthlyDonation);
          }
          //If amount is between 100 and 199.99 show lightbox - make monthly gift 35
          if(amount>=100 && amount<=199.99){
               monthlyDonation = 35;
               showLightbox(monthlyDonation);
          }
          //If amount is between 50 and 99.99 show lightbox - make monthly gift 20
          if(amount>=50 && amount<=99.99){
               monthlyDonation = 20;
               showLightbox(monthlyDonation);
          }
          //If amount is between 20 and 49.99 show lightbox - make monthly gift 10
          if(amount>=20 && amount<=49.99){
               monthlyDonation = 10;
               showLightbox(monthlyDonation);
          }
          //If amount is below 19.99 show lightbox - make monthly gift 5
          if(amount<=19.99){
               monthlyDonation = 5;
               showLightbox(monthlyDonation);
          }

     }
});




function showLightbox(newGift){
     jQuery.colorbox({
          html:"<div class='monthlyUpsellLightbox' style='width:400px; height:200px;background-color:#fff;border:1px solid #000;'><h1>Old gift amount is " + amount + "<br/>New gift amount would be " + newGift + " each month</h1><div>Do you want to make your gift a monthly donation?</div><button id='noButton' onclick='noChange()'>I do not want to make my gift monthly.</button><button id='yesButton' onclick='changeAmount()'>Yes, make my gift monthly.</button></div>"
     });
}


function noChange(){
     jQuery.colorbox.close();
     submitForm();
}


function changeAmount(){
     //Change the amount of donation field
     document.getElementById('level_standardexpanded11703amount').value = monthlyDonation;

     //Check donation field radio button
     document.getElementById('level_standardexpanded11703').checked = true;


     //Set monthly checkbox to be checked
     document.getElementById('level_standardauto_repeatname').checked = true;

     jQuery.colorbox.close();

     submitForm();

}

function submitForm(){
     console.log("submit form reached");
     document.getElementById('ProcessForm').submit();
}




</script>

我对网络开发非常陌生，因此我感谢您提供的任何建议!非常感谢您的帮助!!

Answer 1

这是通过触发提交按钮的单击事件而不是在表单上调用提交来解决的。下面的代码:

function submitForm(){
  document.getElementById('ProcessForm').submit();
}

更改为:

function submitForm(){
  document.getElementById('pstep_finish').click();
}

谢谢大家的帮助! :)