Fatal编程技术网
  • javascript/
  • Javascript 如何在填充另一个文本框时更新HTML表单中的文本框？

Javascript 如何在填充另一个文本框时更新HTML表单中的文本框？

javascript php jquery html

Javascript 如何在填充另一个文本框时更新HTML表单中的文本框？,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我创建了一个包含多个字段的表单。这些字段中有几个权重字段。我有一个ScaleInWeight，ScaleOutWeight，BOLWeight，scalewight和ScaleDiff。前三个是输入或从磅秤捕获的重量。scalewight是scalewight和scalewight之间的差异，ScaleDiff是BOLWeight和scalewight之间的差异。还有其他几个字段，但它们与此无关，这是我的表格： <form action="ScaleTimes.php" metho

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

    <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>
然后添加了如下功能：

<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>


$（文档）.ready（函数（）{
$（#scalewight'）。更改（更新信息）；
$（'#ScaleDiff'）.change（UpdateInfo）；
});
函数UpdateInfo（）{
var ScaleInWeight=$（'#ScaleInWeight'）.val（）；
var ScaleOutWeight=$（'#ScaleOutWeight'）.val（）；
var BOLWeight=$（'#BOLWeight'）.val（）；
var calscalewight=scaleinwight-scaleOutwight；
var calScaleDiff=BOLWeight-CalScaleWight；
$（'#scalewight'）.val（calscalewight）；
$（'#ScaleDiff'）.val（calScaleDiff）；
}
当我测试这个的时候，虽然什么都没发生。我错过了什么？还有，我该怎么做才能得到绝对值，使其始终是正的呢？

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

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



约会编号
使用JavaScript处理文本框的“输入”或“键控”事件，获取当前值，然后使用这些值计算其他值，然后用新值更新HTML的相关部分。你对此做过研究吗？如果你搜索的话，在线教程、之前的SO问题等中有很多此类功能的例子。谷歌从这个网站和其他网站获得了很多有用的结果，感谢更新。因为没有id为“ScaleView”或“ScaleDiff”的元素，所以不会发生任何事情……因此更改事件不会附加到任何内容。要么在相关文本框中添加一个“id”属性，要么只添加一个不同的选择器来查找每个元素。另外，由于两种情况下运行的都是相同的事件，因此为它们提供一个共同的CSS类可能是有意义的，因此您只需声明一次“更改”事件。如果您使用JS，则应始终打开控制台。那么你马上就会发现问题所在：-）@ADyson我会从现在开始记住这一点。看来我还需要学习更多的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 - calScaleWeight;

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



    <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>



<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>