Javascript-计算两个相关字段之间的余数

Question

First of all, I would like to calculate the remaining QTY (quantity) between two fields in a form; in other words I have the actual QTY input text field as a read-only where its value is obtained from mysql table AND there is the user QTY input text field is taken from the user input. All I want is to decrement the actual QTY based on what the user input in the user QTY .

I have the following code as follows :

$query2 = "SELECT * from store_00";
$result2 = mysql_query($query2);
$n = array();
while($row2 = mysql_fetch_assoc($result2)){
echo "<td align=center>".$row2['item_no']."</td><td align=center>";
?>
<input type="text" id="fname" value="<?php echo $row2['qty'] ?>" readonly="readonly"/>
<?php
echo "</td>";

for($i=0;$i<$num;$i++){
echo "<td align=center>"; ?><input autofocus="autofocus" onchange="myFunction(this.value);" type="text" name="n[]" value=""/><?php echo "</td>";
}
echo "</tr>";
}

And the Javascript code :

function myFunction(v)
{
var x=document.getElementById("fname");
x.value = x.value - v;
}

The above will output in the actual QTY correctly for the first time, but when user changes the value back to 0 , it will decrements from the new actual QTY value which gives a false remaining...So there must be a way to have a temporary actual QTY value saved somewhere.

Anyways I know the code looks awful, I'm still new to JS and not sure how to just create a simple relation and remaining calculation between two fields.

Answer 1

As you don't use jQuery and your question is about javascript, i've changed some things to do what you want easily. Also, the id should be unique while classes don't need to be unique. As you have ids with the same values that creates a problem, also as you stated, you don't store your original value, and this is your main problem. There are many methods for this but i prefer this as it's easy to understand i guess.

$n = array();
echo "<table>";
while($row2 = mysql_fetch_assoc($result2)){
    echo "<tr class='inputs'>";
    echo "<td align=center> ".$row2['item_no']." </td><td align=center>";
    echo "<input class='original' type='text' id='c".$row2['item_no']."' value='".$row2['qty']."' readonly='readonly'/>";
    echo "</td>";
    for($i=0;$i<$num;$i++){
        echo "<td align=center>";
        echo "<input class='d".$row2['item_no']."'  data-goto='c".$row2['item_no']."' data-original = '".$row2['qty']."' autofocus='autofocus' onchange='myFunction(this);' type='text' name='n[]' value='0'/>";
        echo "</td>";
    }
    echo "</tr>";
}
echo "</table>";

With the html5, you can define custom tags with the data- prefix, and you can reach them with getAttribute method for that object.

<script>  
    function myFunction(v){
        var minus = 0;
        var mutualInputs = document.getElementsByClassName(v.className);
        for (var i = 0; i < mutualInputs.length; ++i) {
            var item = mutualInputs[i];  
            minus = minus + parseInt(item.value);
        }
        var original = v.getAttribute('data-original');
        var x = document.getElementById(v.getAttribute('data-goto'));
        x.value = original - minus;
    }
</script>

ps: your item_no 's must be unique in this example.