Question

我正在编写一个代码，需要将值分配到3个输入标记中。那么它应该如何工作，所以从名为$ qtyAvailable的数据库中提取一个数字。从那里我有3个输入标签cncQty，scatorQty和manualQty。所以这3个标签的总和不能超过$ qtyAvailable。我不知道如何使jQuery分发到这3个动态输入中。

动态是什么意思，例如，假设qtyAvailable是10，当用户将cncQty设置为10时，其他输入标签的上限不能超过0.必须动态分配到max = ＆＃34;＆＃34;在输入标签内。

我知道我需要使用javaScript动态分配到这3个输入中，但我不知道如何实现它。请帮帮我

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

echo '<input class="form-control" id="quantityRequired" name="quantityRequired" type="hidden">';    
echo '<input class="form-control" id="cncQty" name="quantityToCutCnc" type="number" min="0" max='.$qtyAvailable.' placeholder="CNC">';         
echo '<input class="form-control" id="scatorQty" name="quantityToCutScator" type="number" min="0" max='.$qtyAvailable.' placeholder="SCATOR">';       
echo '<input class="form-control" id="manualQty" name="quantityToCutManual" type="number" min="0" max='.$qtyAvailable.' placeholder="MANUAL">';
echo '<br/>';

Answer 1

正如你在问题中提到过jquery：

 $("input.form-control").change(function() {

  var quantityAvailable =  $("#quantityRequired").val();
  var id = this.id;
  var sum = 0;
  $('input.form-control').each(function() {
    sum+= Number($(this).val());
  });

  $("input.form-control").each(function() {
    if(this.id!=id) {

            $(this).attr("max",quantityAvailable - sum + Number(this.value));

    } 
  });
});

<强> HTML：

 <input class="form-control" id="quantityRequired" name="quantityRequired" type="hidden" value="10">

 <input class="form-control" id="cncQty" name="quantityToCutCnc"    type="number" min="0" max='10' placeholder="CNC">         
   <input class="form-control" id="scatorQty" name="quantityToCutScator" type="number" min="0" max='10' placeholder="SCATOR">   
   <input class="form-control" id="manualQty" name="quantityToCutManual" type="number" min="0" max='10' placeholder="MANUAL">

假设：隐藏字段包含availableComponents的数量。

<强> DEMO

Answer 2

<强> HTML

Quantity Required : <span id='quantityRequired'>20</span><br />
<input type='number' name='val1' min='0' value='0' required /> <br />
<input type='number' name='val2' min='0' value='0' required /> <br />
<input type='number' name='val3' min='0' value='0' required />

<强>的JavaScript

var 
    total = parseInt($('#quantityRequired').text()),
    inputs = $('input[type="number"]');

inputs
    .attr('max', total)
    .change(function() {

        //Make sure that current value is in range
        if($(this).val() > parseInt($(this).attr('max'))) {
            $(this).val($(this).attr('max'));
        } else if ($(this).val() < parseInt($(this).attr('min'))) {
            $(this).val($(this).attr('min'));
        }

        //Get currently available total
        var current = available();

        //Now update max on each input
        $('input').each(function(indx) {
            $(this).attr('max',  parseInt($(this).val()) + total - current);
        });
    });

function available() {
    var sum = 0;
    inputs.each(function() {
        sum += parseInt($(this).val());
    });
    return sum;
}

演示：http://jsfiddle.net/k2QVV/

试试这个。用户不会选择超过要求的任何时间。

Answer 3

您可以在提交之前对表单输入执行验证，以检查总计是否超过可用。

假设您的表单有id =＆＃34; myForm＆＃34;。

$( "#myForm" ).submit(function( event ) {
    if (($("#cncQty").val() + $("#scatorQty ").val() + $("#manualQty").val())
           > $("#quantityRequired").val() ) 
    {
        alert( "You have enter more widgets than available!" );
        event.preventDefault();
    }
});

Answer 4

您的要求不明确。我收集的是你想把$ qtyAvailable分成三个不同的值，并将它们分别存储在三个不同的标签中。如果你不希望它们平均存储，你可以将$ qtyAvailable值减少一个并存储它们。如下代码： -

$qtyAvailable = $row['QTY_REQUIRED'] - $row['QTY_CUT'];   
echo '<input class="form-control" id="quantityRequired" name="quantityRequired" type="hidden">';

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

$scatorQty = $cncQty - 1;
 echo '<input class="form-control" id="scatorQty" name="quantityToCutScator" type="number" min="0" max='.$qtyAvailable.' placeholder="SCATOR" value="'.$scatorQty .'">';       

 $manualQty= $scatorQty - 1;
 echo '<input class="form-control" id="manualQty" name="quantityToCutManual" type="number" min="0" max='.$qtyAvailable.' placeholder="MANUAL" value="'.$scatorQty .'" >';
   echo '<br/>';

将特定值分配到3个html输入标记中

4 个答案: