填写另一个文本框后，如何更新HTML表单中的文本框？

时间：2018-11-19 15:22:48

标签： javascript php jquery html html5

我创建了一个包含多个字段的表单。这些字段中有几个权重字段。我有一个ScaleInWeight，ScaleOutWeight，BOLWeight，ScaleWeight和ScaleDiff。前三个是输入或从秤中捕获的权重。 ScaleWeight是ScaleInWeight和ScaleOutWeight之间的差异，而ScaleDiff是BOLWeight和ScaleWeight之间的差异。还有其他几个字段，但这无关紧要，这是我的表格：

    <form action="ScaleTimes.php" method="POST" enctype="multipart/form-data">
        <table id="getApt" class="center">
            <tr>
                <td><input type="submit" class="OrderButton"  name="findApt" value="Find"></td>
                <td>Appointment Number<br><input type="text" name="AptNo" value="<?php if(isset($_POST['AptNo'])){ echo $_POST['AptNo'];} ?>" required autofocus="true"></td>
                <td>Appointment Date<br><input type="date" name="AptDate" value="<?php if(isset($_POST['AptDate'])){ echo $_POST['AptDate'];} ?>"></td>
                <td>Appointment Period<br>
                    <select name="AptPeriod">
                        <option value="">Select. . .</option>
                        <option value="3">6-8</option>
                        <option value="4">8-10</option>
                        <option value="5">10-12</option>
                        <option value="6">12-14</option>
                        <option value="7">14-16</option>
                        <option value="9">Open</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Scale In Weight<br><input type="number" name="ScaleInWeight" value="<?php if(isset($_POST['ScaleInWeight'])){ echo $_POST['ScaleInWeight'];} ?>"></td>
                <td>Scale In Date/Time<br><input type="datetime" name="ScaleInDateTime" value="<?php if(isset($_POST['ScaleInDateTime'])){ echo $_POST['ScaleInDateTime'];} ?>"></td>
                <td>Scale In Weight<br><input type="number" name="ScaleOutWeight" value="<?php if(isset($_POST['ScaleOutWeight'])){ echo $_POST['ScaleOutWeight'];} ?>"></td>
                <td>Scale Out Date/Time<br><input type="datetime" name="ScaleOutDateTime" value="<?php if(isset($_POST['ScaleOutDateTime'])){ echo $_POST['ScaleOutDateTime'];} ?>"></td>
            </tr>
            <tr>
                <td>Customer<br><input type="text" name="Customer" value="<?php if(isset($_POST['Customer'])){ echo $_POST['Customer'];} ?>" autocomplete="on"></td>
                <td>Carrier<br><input type="text" name="Carrier" value="<?php if(isset($_POST['Carrier'])){ echo $_POST['Carrier'];} ?>"></td>
                <td>Driver<br><input type="text" name="Driver" value="<?php if(isset($_POST['Driver'])){ echo $_POST['Driver'];} ?>"></td>
                <td>Weighed By<br>
                    <select name="WeighedBy">
                        <option value="">Select Name...</option>
                        <option value="Tia Rian">Tia Rian</option>
                        <option value="Bruce Tippy">Bruce Tippy</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>BOL Weight<br><input type="text" name="BOLWeight" value="<?php if(isset($_POST['BOLWeight'])){ echo $_POST['BOLWeight'];} ?>"></td>
                <td>Scale Weight<br><input type="text" name="ScaleWeight" value="<?php if(isset($_POST['ScaleWeight'])){ echo $_POST['ScaleWeight'];} ?>" disabled></td>
                <td>Scale Difference<br><input type="text" name="ScaleWeight" value="<?php if(isset($_POST['ScaleDiff'])){ echo $_POST['ScaleDiff'];} ?>" disabled></td>
            </tr>
            <tr>
                <td>Truck Number<br><input type="text" name="TruckNo" value="<?php if(isset($_POST['TruckNo'])){ echo $_POST['TruckNo'];} ?>"></td>
                <td>Trailer Number<br><input type="text" name="TrailerNo" value="<?php if(isset($_POST['TrailerNo'])){ echo $_POST['TrailerNo'];} ?>"></td>
                <td>BOL Number<br><input type="text" name="BOLNo" value="<?php if(isset($_POST['BOLNo'])){ echo $_POST['BOLNo'];} ?>"></td>
                <td>AX Purchase Order<br><input type="text" name="AxPurchaseOrder" value="<?php if(isset($_POST['AxPurchaseOrder'])){ echo $_POST['AxPurchaseOrder'];} ?>"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" class="OrderButton" name="submit" value="Submit"></td>
                <td><input type="submit" class="OrderButton" name="reset" value="Reset"></td>
                <td><a href="http://LaFargaWebSRV:8080/ScaleTimeDashboard.php" class="OrderButton">Dashboard</a></td>
            </tr>
        </table>
    </form>

我要弄清楚的是如何在输入其他权重时更新ScaleWeight和ScaleDiff。

例如，捕获ScaleInWeight时什么也没发生。

然后还捕获了ScaleOutWeight时，应该进行一次计算，得出ScaleWeight（仅绝对值）

然后，在将BOLWeight添加到ScaleDeff的形式中时，也应该计算（仅绝对值）。

因此，如果ScaleInWeight被捕获为31920，而ScaleOutWeight被捕获为74660，则ScaleWeight应该计算为42740。

将BOLWeight输入为42731时，ScaleDeff应计算为9。

编辑

我对表单进行了更改，添加了一个名为UpdateInfo的函数，如下所示：

    <form action="ScaleTimes.php" method="POST" enctype="multipart/form-data" name="ScaleTime">
        <table id="getApt" class="center">
            <tr>
                <td><input type="submit" class="OrderButton"  name="findApt" value="Find"></td>
                <td>Appointment Number<br><input type="text" name="AptNo" value="<?php if(isset($_POST['AptNo'])){ echo $_POST['AptNo'];} ?>" required autofocus="true"></td>
                <td>Appointment Date<br><input type="date" name="AptDate" value="<?php if(isset($_POST['AptDate'])){ echo $_POST['AptDate'];} ?>"></td>
                <td>Appointment Period<br>
                    <select name="AptPeriod">
                        <option value="">Select. . .</option>
                        <option value="3">6-8</option>
                        <option value="4">8-10</option>
                        <option value="5">10-12</option>
                        <option value="6">12-14</option>
                        <option value="7">14-16</option>
                        <option value="9">Open</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Scale In Weight<br><input type="number" name="ScaleInWeight" value="<?php if(isset($_POST['ScaleInWeight'])){ echo $_POST['ScaleInWeight'];} ?>" onchange="UpdateInfo()"></td>
                <td>Scale In Date/Time<br><input type="datetime" name="ScaleInDateTime" value="<?php if(isset($_POST['ScaleInDateTime'])){ echo $_POST['ScaleInDateTime'];} ?>"></td>
                <td>Scale In Weight<br><input type="number" name="ScaleOutWeight" value="<?php if(isset($_POST['ScaleOutWeight'])){ echo $_POST['ScaleOutWeight'];} ?>" onchange="UpdateInfo()"></td>
                <td>Scale Out Date/Time<br><input type="datetime" name="ScaleOutDateTime" value="<?php if(isset($_POST['ScaleOutDateTime'])){ echo $_POST['ScaleOutDateTime'];} ?>"></td>
            </tr>
            <tr>
                <td>Customer<br><input type="text" name="Customer" value="<?php if(isset($_POST['Customer'])){ echo $_POST['Customer'];} ?>" autocomplete="on"></td>
                <td>Carrier<br><input type="text" name="Carrier" value="<?php if(isset($_POST['Carrier'])){ echo $_POST['Carrier'];} ?>"></td>
                <td>Driver<br><input type="text" name="Driver" value="<?php if(isset($_POST['Driver'])){ echo $_POST['Driver'];} ?>"></td>
                <td>Weighed By<br>
                    <select name="WeighedBy">
                        <option value="">Select Name...</option>
                        <option value="Tia Rian">Tia Rian</option>
                        <option value="Bruce Tippy">Bruce Tippy</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>BOL Weight<br><input type="text" name="BOLWeight" value="<?php if(isset($_POST['BOLWeight'])){ echo $_POST['BOLWeight'];} ?>" onchange="UpdateInfo()"></td>
                <td>Scale Weight<br><input type="text" name="ScaleWeight" value="<?php if(isset($_POST['ScaleWeight'])){ echo $_POST['ScaleWeight'];} ?>" disabled onchange="UpdateInfo()"></td>
                <td>Scale Difference<br><input type="text" name="ScaleWeight" value="<?php if(isset($_POST['ScaleDiff'])){ echo $_POST['ScaleDiff'];} ?>" disabled></td>
            </tr>
            <tr>
                <td>Truck Number<br><input type="text" name="TruckNo" value="<?php if(isset($_POST['TruckNo'])){ echo $_POST['TruckNo'];} ?>"></td>
                <td>Trailer Number<br><input type="text" name="TrailerNo" value="<?php if(isset($_POST['TrailerNo'])){ echo $_POST['TrailerNo'];} ?>"></td>
                <td>BOL Number<br><input type="text" name="BOLNo" value="<?php if(isset($_POST['BOLNo'])){ echo $_POST['BOLNo'];} ?>"></td>
                <td>AX Purchase Order<br><input type="text" name="AxPurchaseOrder" value="<?php if(isset($_POST['AxPurchaseOrder'])){ echo $_POST['AxPurchaseOrder'];} ?>"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" class="OrderButton" name="submit" value="Submit"></td>
                <td><input type="submit" class="OrderButton" name="reset" value="Reset"></td>
                <td><a href="http://LaFargaWebSRV:8080/ScaleTimeDashboard.php" class="OrderButton">Dashboard</a></td>
            </tr>
        </table>
    </form>

然后添加如下函数：

<script type="text/javascript">
    $(document).ready(function () {
        $('#ScaleWeight').change(UpdateInfo);
        $('#ScaleDiff').change(UpdateInfo);
    });

    function UpdateInfo() {
        var ScaleInWeight = $('#ScaleInWeight').val();
        var ScaleOutWeight = $('#ScaleOutWeight').val();
        var BOLWeight = $('#BOLWeight').val();

        var calScaleWeight = ScaleInWeight - ScaleOutWeight;
        var calScaleDiff = BOLWeight - calScaleWeight;

        $('#ScaleWeight').val(calScaleWeight);
        $('#ScaleDiff').val(calScaleDiff);
    }
</script>

尽管没有任何反应，但我对此进行了测试。我想念什么？另外，我该怎么做才能获得绝对值，因此它始终是正值？

1 个答案:

答案 0 :(得分：0)

在@ADyson的帮助下，我能够弄清楚这一点。这是我所做的：

表单（是的，使用css类可能会更好，而不是声明多个更改事件，但我还没有这样做）：

    <form action="ScaleTimes.php" method="POST" enctype="multipart/form-data" name="ScaleTime">
        <table id="getApt" class="center">
            <tr>
                <td><input type="submit" class="OrderButton"  name="findApt" value="Find"></td>
                <td>Appointment Number<br><input type="text" name="AptNo" value="<?php if(isset($_POST['AptNo'])){ echo $_POST['AptNo'];} ?>" required autofocus="true"></td>
                <td>Appointment Date<br><input type="date" name="AptDate" value="<?php if(isset($_POST['AptDate'])){ echo $_POST['AptDate'];} ?>"></td>
                <td>Appointment Period<br>
                    <select name="AptPeriod">
                        <option value="">Select. . .</option>
                        <option value="3">6-8</option>
                        <option value="4">8-10</option>
                        <option value="5">10-12</option>
                        <option value="6">12-14</option>
                        <option value="7">14-16</option>
                        <option value="9">Open</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Scale In Weight<br><input type="number" id="ScaleInWeight" name="ScaleInWeight" value="<?php if(isset($_POST['ScaleInWeight'])){ echo $_POST['ScaleInWeight'];} ?>" onchange="UpdateInfo()"></td>
                <td>Scale In Date/Time<br><input type="datetime" name="ScaleInDateTime" value="<?php if(isset($_POST['ScaleInDateTime'])){ echo $_POST['ScaleInDateTime'];} ?>"></td>
                <td>Scale In Weight<br><input type="number" id="ScaleOutWeight" name="ScaleOutWeight" value="<?php if(isset($_POST['ScaleOutWeight'])){ echo $_POST['ScaleOutWeight'];} ?>" onchange="UpdateInfo()"></td>
                <td>Scale Out Date/Time<br><input type="datetime" name="ScaleOutDateTime" value="<?php if(isset($_POST['ScaleOutDateTime'])){ echo $_POST['ScaleOutDateTime'];} ?>"></td>
            </tr>
            <tr>
                <td>Customer<br><input type="text" name="Customer" value="<?php if(isset($_POST['Customer'])){ echo $_POST['Customer'];} ?>" autocomplete="on"></td>
                <td>Carrier<br><input type="text" name="Carrier" value="<?php if(isset($_POST['Carrier'])){ echo $_POST['Carrier'];} ?>"></td>
                <td>Driver<br><input type="text" name="Driver" value="<?php if(isset($_POST['Driver'])){ echo $_POST['Driver'];} ?>"></td>
                <td>Weighed By<br>
                    <select name="WeighedBy">
                        <option value="">Select Name...</option>
                        <option value="Tia Rian">Tia Rian</option>
                        <option value="Bruce Tippy">Bruce Tippy</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>BOL Weight<br><input type="text" id="BOLWeight" name="BOLWeight" value="<?php if(isset($_POST['BOLWeight'])){ echo $_POST['BOLWeight'];} ?>" onchange="UpdateInfo()"></td>
                <td>Scale Weight<br><input type="text" id="ScaleWeight" name="ScaleWeight" value="<?php if(isset($_POST['ScaleWeight'])){ echo $_POST['ScaleWeight'];} ?>" disabled onchange="UpdateInfo()"></td>
                <td>Scale Difference<br><input type="text" id="ScaleDiff" name="ScaleDiff" value="<?php if(isset($_POST['ScaleDiff'])){ echo $_POST['ScaleDiff'];} ?>" disabled></td>
            </tr>
            <tr>
                <td>Truck Number<br><input type="text" name="TruckNo" value="<?php if(isset($_POST['TruckNo'])){ echo $_POST['TruckNo'];} ?>"></td>
                <td>Trailer Number<br><input type="text" name="TrailerNo" value="<?php if(isset($_POST['TrailerNo'])){ echo $_POST['TrailerNo'];} ?>"></td>
                <td>BOL Number<br><input type="text" name="BOLNo" value="<?php if(isset($_POST['BOLNo'])){ echo $_POST['BOLNo'];} ?>"></td>
                <td>AX Purchase Order<br><input type="text" name="AxPurchaseOrder" value="<?php if(isset($_POST['AxPurchaseOrder'])){ echo $_POST['AxPurchaseOrder'];} ?>"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" class="OrderButton" name="submit" value="Submit"></td>
                <td><input type="submit" class="OrderButton" name="reset" value="Reset"></td>
                <td><a href="http://LaFargaWebSRV:8080/ScaleTimeDashboard.php" class="OrderButton">Dashboard</a></td>
            </tr>
        </table>
    </form>

然后是JavaScript：

<script type="text/javascript">
    $(document).ready(function () {
        $('#ScaleWeight').change(UpdateInfo);
        $('#ScaleDiff').change(UpdateInfo);
    });

    function UpdateInfo() {
        var ScaleInWeight = $('#ScaleInWeight').val();
        var ScaleOutWeight = $('#ScaleOutWeight').val();
        var BOLWeight = $('#BOLWeight').val();

        var calScaleWeight = ScaleInWeight - ScaleOutWeight;
        var calScaleDiff = BOLWeight - Math.abs(calScaleWeight);

        $('#ScaleWeight').val(Math.abs(calScaleWeight));
        $('#ScaleDiff').val(Math.abs(calScaleDiff));
    }
</script>

因为我只需要差异，而我不在乎它们是否为负，所以我在计算中使用绝对值。

相关问题
最新问题