Question

我正在撰写捐款表格，我们正在尝试创建一个弹出窗口，鼓励人们每月而不是一次性。逻辑如下：

用户提交捐款表格
如果选择了每月捐赠复选框，则弹出窗口不会显示
如果未选择每月捐赠复选框，则会检查捐赠金额
如果礼品价格高于500美元，则不显示弹出窗口，并通过名为submitForm（）的函数提交表单。这非常有效。
向所有其他用户显示弹出窗口。它包括两个按钮，一个用于将其礼物更改为每月一个，另一个用于将捐赠作为最初输入时的一次性礼物提交。
如果用户选择他们不想每月制作礼物，则会调用submitForm（）函数。
如果用户选择他们确实想要每月制作礼物，则代码会更改表单，以便选择每月复选框，并且金额会更改为较低的金额。然后调用submitForm（）函数。

我遇到的问题是，如果金额超过500美元且没有任何问题，submitForm（）函数将会起作用。但是，如果向用户显示弹出窗口，则表单将不会提交。它会关闭弹出窗口，似乎重新加载页面但实际上并未提交表单。有谁知道为什么会发生这种情况？仅仅是一个FYI，我没有对弹出窗口做任何样式，现在我只是试图让按钮工作。

表格可在此处找到：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();
}

谢谢大家的帮助！：）

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

1 个答案: