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

Question

I have software design that to distribute a value into 3 input tags.

<?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>';
}
?>

So i need to distribute $qtyAvailable into quantityToCutCnc, quantityToCutScator, and quantityToCutManual . So the sum of those 3 cannot exceed $qtyAvailable . I am assuming that we need to use jQuery with that.

Answer 1

Here's a good starting point, I think:

http://jsfiddle.net/X8RFe/2/

// 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);

});

You'll probably want to test and tweak it a bit further, as I only tested it for a few seconds.