Javascript 将值分配到3个输入标记中

我有一个软件设计，可以将一个值分配到3个输入标签中

<?php
while ($row = oci_fetch_array($result, OCI_BOTH)){

       $qtyAvailable = $row['QTY_REQUIRED'] - $row['QTY_CNCED'];   

       echo '<input class="form-control" id="test1" name="quantityToCutCnc" type="number" min="0" max='.$qtyAvailable.' placeholder="CNC">';

       echo '<input class="form-control" id="test2" name="quantityToCutScator" type="number" min="0" max='.$qtyAvailable.' placeholder="Scator">';

       echo '<input class="form-control" id="test3" name="quantityToCutManual" type="number" min="0" max='.$qtyAvailable.' placeholder="Manual">';
       echo '<br/>';
       echo '<strong>Total : </strong><div id="spent"></div>';

       echo '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>';
       echo '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>';

       echo '<script src="componentRequestJS/qtyDistribution.js"></script>';
}
?>

---

因此，我需要将

$qtyAvailable

分为

quantityToCutCnc、quantityToCutScator和quantityToCutManual

。因此，这三者的总和不能超过

$qtyAvailable

。我假设我们需要将jQuery与之结合使用

我认为这是一个很好的起点：

---

您可能需要进一步测试和调整它，因为我只测试了几秒钟。

$qtyAvailable

包含什么？如何“分发”呢？请澄清。不，您不需要jquery。它只是一个javascript库。但您确实需要javascript来完成此操作，除非您想让您的用户进行完整的表单提交/页面重建，以便您可以在服务器上进行计算。@AmalMurali，以便从数据库中检索可用数量，并在此变量中分配一些值。分布式意味着我们将在这3个输入上有一个数字选择器。但这一数字的总和不能超过可用的QTY美元。它设置了max=“”的限制。因此，当$QTYAAvailable为10时，如果2个输入为0，则1个输入可以达到10。如果我们减少第一个输入值，那么我们可以增加另外两个输入。我不确定我是否理解。例如，如果可用数量为15，您希望如何分割它们？@AmalMurali如果数量为15，则如果第一个输入为15，则无法输入其他2个输入。如果第一个输入是10，那么有5个可以分配到其他2个输入中。当我测试这个时，上限没有正确设置。所以总数量是20，当我设置第一个和第二个输入时，我仍然可以增加第三个输入。当其他2个输入达到20时，第3个输入不可编辑。不是吗？对不起，我不明白你的意思。看一看小提琴可能会有帮助，看看它是如何工作的。最后一个问题，我如何将$row['QTY_REQUIRED']传递给javascript？嘿，dg988这是一个惊人的答案，但您使用class=“form control”。如果我用不同的名称分隔3个输入，该怎么办？您可以根据自己的喜好将它们作为目标。您可以使用3个独立的

id

，但我建议您坚持使用一个类。可能是

。剪切分布
。您应该
将必要的变量回送到
标记中。
// echo from php
var available = 20;

jQuery('.form_control').on('change',function(event) {


    setTimeout(function() {
        var used = 0;
        jQuery('.form_control').each(function() {
            used += (parseInt(jQuery(this).val(),10) || 0);
        });

        if (used > available) {

            var current = parseInt(jQuery(event.target).val(),10);

             jQuery(event.target).val(current-(used-available));    
        }
    },1);

});