表格計算功能完成後打開模態窗口

我有一個基本形式，有複選框。每個複選框都是一個不同的（簡單）計算。在函數結束時進行一些更多的計算並存儲在變量中。

我需要先從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

表格計算功能完成後打開模態窗口

回答

相關問題