使用表單值動態計算同一頁面上的另一個值

Question

我正嘗試使用表單值來動態計算同一頁面上的另一個值。

我有兩個表：

1. 與輸入形式
2. 我想要動態發佈之前，使用的輸入表單值。

我已經使用了PHP，但它不起作用，因爲我必須提交才能獲取值。我不是很熟悉j腳本和ajax，但是我聽說可以使用它們來完成它。讓我知道你認爲最好的解決方案。感謝您的建議。

這裏的例子：

<table><form name="form1" method="post" action="results.php"> 
    <tr> 
     <td> </td><td> a </td><td> b </td> 
    </tr> 
    <tr> 
     <td> Line 1 </td><td><input name="a1" type="number"></td><td><input name="b1" type="number"></td> 
    </tr> 
    <tr> 
     <td> Line 2 </td><td><input name="a2" type="number"></td><td><input name="b2" type="number"></td> 
    </tr> 
    <tr> 
     <td><input type="submit" name="Submit" value="Submit"></td> 
    </tr> 
</form></table> 

<table> 
    <tr> 
     <td> Dynamic Result </td> 
    </tr> 
    <tr> 
     <td> a1/b1 (to be calculated dynamically)</td> 
    </tr> 
    <tr> 
     <td> a2/b2 (to be calculated dynamically) </td> 
    </tr> 
</table> 

Answer 1

你需要開始閱讀jQuery的，但現在：

// Load jQuery Library, put jquery.js in current directory 
<script type="text/javascript" src="jquery.js"></script> 
<table><form name="form1" id="form1" method="post" action="results.php"> 
    <tr> 
     <td> </td><td> a </td><td> b </td> 
    </tr> 
    <tr> 
     <td> Line 1 </td><td><input name="a1" id="a1" type="number"></td><td><input name="b1" id="b1" type="number"></td> 
    </tr> 
    <tr> 
     <td> Line 2 </td><td><input name="a2" id="a2" type="number"></td><td><input name="b2" id="b2" type="number"></td> 
    </tr> 
    <tr> 
     <td><input type="submit" name="Submit" value="Submit"></td> 
    </tr> 
</form></table> 

<table> 
    <tr> 
     <td> Dynamic Result </td> 
    </tr> 
    <tr> 
     <td id="first-result"> a1/b1 (to be calculated dynamically)</td> 
    </tr> 
    <tr> 
     <td id="second-result"> a2/b2 (to be calculated dynamically) </td> 
    </tr> 
</table> 


<script> 
$(document).ready(function(){ 
    $('input').on('change', function(){ 
     var a1 = $('#a1').val(); 
     var a2 = $('#a2').val(); 
     var b1 = $('#b1').val(); 
     var b2 = $('#b2').val(); 
     $('#first-result').text(parseInt(a1)/parseInt(a2)); 
     $('#second-result').text(parseInt(a2)/parseInt(b2)); 
    }); 
}); 
</script>