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

Question

我正在尝试使用表单值来动态计算同一页面上的另一个值。

我有两张桌子：

1. 使用输入表单
2. 我想在发布之前动态使用输入表单值。

我已经使用过 php，但它不起作用，因为我必须提交才能获取值。我对 j script 和 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>