Php 使用表单值动态计算同一页面上的另一个值

我试图使用表单值动态计算同一页面上的另一个值

我有两张桌子：

使用输入表单

我希望在发布前动态使用输入表单值

我已经使用过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>

a b
第1行
第2行
动态结果
a1/b1（动态计算）
a2/b2（动态计算）

---

您需要开始阅读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>

//加载jQuery库，将jQuery.js放入当前目录
a b
第1行
第2行
动态结果
a1/b1（动态计算）
a2/b2（动态计算）
$（文档）.ready（函数（）{
$（'input'）。在（'change'，function（）上{
var a1=$（'#a1'）.val（）；
var a2=$（'#a2'）.val（）；
var b1=$（'#b1'）.val（）；
var b2=$（'#b2'）.val（）；
$（“#第一个结果”）.text（parseInt（a1）/parseInt（a2））；
$（“#第二个结果”）.text（parseInt（a2）/parseInt（b2））；
}); 
});

有几件事：！==，==，是的，javascript是一种可能的解决方案。你应该好好读一读。