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

我有一个基本形式，有复选框。每个复选框都是一个不同的（简单）计算。在函数结束时进行一些更多的计算并存储在变量中。

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

此刻我正在使用Magnific-Pop。

我知道计算必须先完成，因此变量才有数据。但我不知道如何运行该功能，然后弹出窗口。现在，点击按钮后，该窗口将在该函数运行之前打开。

表单按钮

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

模态窗口

$('.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>

如果计算完成之前（当然）模态窗口打开的值为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>

谷歌图表代码

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, '' ],  
     ]);

来源

2015-05-01 user4742637

我不知道很多关于magnificPopup，但在这情况下，你实际上只需要添加一个带有“ajax-popup-link”类的隐藏div，并从链接中删除这个类。在完成所有工作之后，您可以调用“$（'.ajax-popup-link'）。click（）”来调出模态。在Calculate（）函数中，

要实现它，不喜欢以下：

变化

<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>

要正确设置的计算值，以弹出窗口中，您可以将ID添加到需要显示该值的节点，如下面的html代码：

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

而在calculate（）函数中，在完成计算后，添加此代码：

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

来源

2015-05-01 19:32:02 Surely

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

回答

相关问题