表格计算功能完成后打开模态 window

Question

表格计算功能完成后打开模式window

我有一个包含复选框的基本表单。每个复选框都是一个不同的（简单的）计算。在函数的末尾，还会进行一些计算并将其存储在变量中。

我需要先从 onclick 事件中运行这个计算函数，然后在模式中显示它们 window。

我现在正在使用 Magnific-Pop。

我知道必须先进行计算，这样变量才有数据。但是我不知道如何运行函数然后弹出window。现在，当单击按钮时，window 在函数运行.

之前打开

表单按钮

<input type="submit" class="calculate ajax-popup-link" href="dev/calculator/results1.html" value="Calculate Savings" onclick=”calculate();”>

模态window

$('.ajax-popup-link').magnificPopup({
   items: {
     src: '#popup',
     type: 'inline',
    //preloader: true,
  },
 });

此代码显示一个包含所有变量的 div。常量变量显示但不显示最终计算。

这是div

<div id="popup" class="white-popup mfp-hide">
 <table class="data savings">
  <thead>
   <tr>
    <th colspan="2"><script>document.write(VarFromCalc);</script></th>
  </tr> 
 </thead>
<tbody>
 <tr>
 <td>Number of patients with potential Reduced Length of Stay</td>
  <td class="stay" id="stay">$ <script>document.write(totalN);   
   </script>   </td>
 </tr>
 </tbody>
</table>

如果模态 window（当然）在计算完成之前打开，则值为 0。

我希望这是有道理的。如果您需要更多信息，请告诉我。

这是计算脚本。

<script>

var n3, n4, n5, n6, totalW, totalB, totalU, totalT, totalN;
var finalCalc;
var n7;

function calculate() {

if (document.getElementById('check1').checked) {
    var check01 = 6 * 7.08;
    var c01 = check01.toFixed(2);  
}  
else {var c01 = 0;}

if (document.getElementById('check2').checked) {
    var check02 = 4 * 4.62;
    var c02 = check02.toFixed(2);            
}
else {var c02 = 0;}

if (document.getElementById('check3').checked) {
    var check03 = 6 * 13.20;
    var c03 = check03.toFixed(2);            
}
else {var c03 = 0;}

if (document.getElementById('check4').checked) {
    var check04 = 6 * 16.00;
    var c04 = check04.toFixed(2);            
}
else {var c04 = 0;}

if (document.getElementById('check5').checked) {
    var check05 = 3 * 1.32;
    var c05 = check05.toFixed(2);            
}
else {var c05 = 0;}

if (document.getElementById('check6').checked) {
    var check06 = 1 * 12.30;
    var c06 = check06.toFixed(2);            
}
else {var c06 = 0;}

if (document.getElementById('check7').checked) {
    var check07 = 4 * 3.16;
    var c07 = check07.toFixed(2);            
}
else {var c07 = 0;}

if (document.getElementById('check8').checked) {
    var check08 = 4 * 4.68;
    var c08 = check08.toFixed(2);            
}
else {var c08 = 0;}

if (document.getElementById('check9').checked) {
    var check09 = 3 * 12.91;
    var c09 = check09.toFixed(2);            
}
else {var c09 = 0;}

if (document.getElementById('check10').checked) {
    var check10 = 3 * 13.55;
    var c10 = check10.toFixed(2);            
}
else {var c10 = 0;}

if (document.getElementById('check11').checked) {
    var check11 = 3 * 50.60;
    var c11 = check11.toFixed(2);            
}
else {var c11 = 0;}

if (document.getElementById('check12').checked) {
    var check12 = 4 * 11.36;
    var c12 = check12.toFixed(2);            
}
else {var c12 = 0;}

if (document.getElementById('check13').checked) {
    var check13 = 1 * 93.58;
    var c13 = check13.toFixed(2);            
}
else {var c13 = 0;}

if (document.getElementById('check14').checked) {
    var check14 = 3 * 18.48;
    var c14 = check14.toFixed(2);            
}
else {var c14 = 0;}

if (document.getElementById('check15').checked) {
    var check15 = 3 * 39.93;
    var c15 = check15.toFixed(2);            
}
else {var c15 = 0;}

if (document.getElementById('check16').checked) {
    var check16 = 2 * 5.98;
    var c16 = check16.toFixed(2);            
}
else {var c16 = 0;}

if (document.getElementById('check17').checked) {
    var check17 = 1 * 12.30;
    var c17 = check17.toFixed(2);            
}
else {var c17 = 0;}

if (document.getElementById('check18').checked) {
    var check18 = 1 * 50.73;
    var c18 = check18.toFixed(2);            
}
else {var c18 = 0;}

if (document.getElementById('check19').checked) {
    var check19 = 3 * 4.36;
    var c19 = check19.toFixed(2);            
}
else {var c19 = 0;}

if (document.getElementById('check20').checked) {
    var check20 = 3 * 284.58;
    var c20 = check20.toFixed(2);            
}
else {var c20 = 0;}

if (document.getElementById('check21').checked) {
    var check21 = 1 * 214.27;
    var c21 = check21.toFixed(2);            
}
else {var c21 = 0;}

if (document.getElementById('check22').checked) {
    var check22 = 2 * 78.00;
    var c22 = check22.toFixed(2);            
}
else {var c22 = 0;}

if (document.getElementById('check23').checked) {
    var check23 = 4 * 6.13;
    var c23 = check23.toFixed(2);            
}
else {var c23 = 0;}

if (document.getElementById('check24').checked) {
    var check24 = 1 * 4.78;
    var c24 = check24.toFixed(2);            
}
else {var c24 = 0;}

if (document.getElementById('check25').checked) {
    var check25 = 2 * 14.52;
    var c25 = check25.toFixed(2);            
}
else {var c25 = 0;}

if (document.getElementById('check26').checked) {
    var check26 = 1 * 229.44;
    var c26 = check26.toFixed(2);            
}
else {var c26 = 0;}

if (document.getElementById('check27').checked) {
    var check27 = 1 * 9.68;
    var c27 = check27.toFixed(2);  

} 
else {var c27 = 0;}

var h51 = (parseFloat(c01) + parseFloat(c02) + parseFloat(c03) + parseFloat(c04) + parseFloat(c05) + parseFloat(c06) + parseFloat(c07) + parseFloat(c08) + parseFloat(c09) + parseFloat(c10) + parseFloat(c11) + parseFloat(c12) + parseFloat(c13) + parseFloat(c14) + parseFloat(c15) + parseFloat(c16) + parseFloat(c17) + parseFloat(c18) + parseFloat(c19) + parseFloat(c20) + parseFloat(c21) + parseFloat(c22) + parseFloat(c23) + parseFloat(c24) + parseFloat(c25) + parseFloat(c26) + parseFloat(c27));

//per month calcs
var j3 = parseFloat(100);
var j4 = parseFloat(200);
var j5 = parseFloat(250);
var j6 = parseFloat(200);
var j7 = parseFloat(600);

var k3 = parseFloat(j3) * 12;
var k4 = parseFloat(j4) * 12;
var k5 = parseFloat(j5) * 12;
var k6 = parseFloat(j6) * 12;
//var k7 = parseFloat(j7)*12;

var l3 = parseFloat(3573);
var l4 = parseFloat(2033);
var l5 = parseFloat(4706);
var l6 = parseFloat(3437);

var m3 = parseFloat(j3)*parseInt(l3);
var m4 = parseFloat(j4)*parseInt(l4);
var m5 = parseFloat(j5)*parseInt(l5);
var m6 = parseFloat(j6)*parseInt(l6);

n3 = Math.round(parseFloat(k3)*parseFloat(l3));
n4 = Math.round(parseFloat(k4)*parseFloat(l4));
n5 = Math.round(parseFloat(k5)*parseFloat(l5));
n6 = Math.round(parseFloat(m6) * 12);
n7 = Math.round(parseFloat(j7) * parseFloat(h51) * 12);

//STORE FINAL CALCS
totalW = n3.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
totalB = n4.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
totalU = n5.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
totalT = n6.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
totalN = n7.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

var totalCalc = Math.round(parseFloat(n3) + parseFloat(n4) + parseFloat(n5) + parseFloat(n6) + parseFloat(n7));
finalCalc = totalCalc.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");



$('.ajax-popup-link').click();


}

</script>

然后我尝试在隐藏的 div 弹出窗口中显示变量

<tr>
    <td>Total ID/AST Cultures</td>
     <td class="cultures" id="cultures">$ <script>document.write(totalT);</script></td>
</tr>

Google 图表代码

 var data = google.visualization.arrayToDataTable([
         ['Element', 'Savings', { role: 'style' }],
         ['Reduced Length of Stay', n7, ''],
         ['Total ID/AST Cultures', n6, ''],
         ['Urine', n5, ''],
         ['Blood', n4, ''],
         ['Wound/Abscess', n3, '' ],       
       ]);

Answer 1

我不太了解 magnificPopup，但在这种情况下，您实际上可以只添加一个隐藏的 div 和 "ajax-popup-link" class，然后删除这个 class 来自 link.

在 Calculate() 函数中，完成所有操作后，调用“$('.ajax-popup-link').click()”调出模态。

要实现它，请执行以下操作：

改变

<input type="submit" class="calculate ajax-popup-link" href="dev/calculator/results1.html" value="Calculate Savings" onclick=”calculate();”>

到

<input type="button" class="calculate" href="dev/calculator/results1.html" value="Calculate Savings" onclick=”calculate();”><a href="javascript:void" class="ajax-popup-link" style="display:none"></a>

要正确设置计算值到弹窗window，你可以给需要显示值的节点添加一个id，像下面html代码：

<th colspan="2" id="var_from_calc"></th>

并在calculate()函数中，计算完成后，添加如下代码：

$('#var_from_calc').html(VarFromCalc);
$('#stay').html(totalN);
$('.ajax-popup-link').click()

表格计算功能完成后打开模态 window

Open modal window after form calculations function is complete

javascript

jquery

modal-dialog