Javascript getElementsByName not working in PHP loop

Question

I've the following PHP code :

//some code
$query = "SELECT * from store_00_transfers";
$result = mysql_query($query);
while($row = mysql_fetch_assoc($result)){

    echo "<tr><td align=center width=19%>{$row['item_no']}</td><td align=center><input type='text' value='{$row['qty']}' name='cqty[]' readonly ></td><td align=center><input type='number' min='0' name='nqty[]' onChange='check_not_large(this.value);' value='0'></td></tr>";        

}

//rest of code

Now, as you can see there is a function inside onChange. That function is meant to check whether the number inserted by user for new qty should not exceed old qty (I use this method to transfer qty's from one store to another).

Please also note I've assigned a name cqty[] and nqty[] inside input fields.

I have javascript code :

<script>
function check_not_large(res) {

  var old = document.getElementsByName("cqty[]");
  var type= document.getElementsByName("nqty[]");
  for(var i = 0; i < old.length; i++) {
    if(type[i].value > old[i].value){

      alert('Error : Qty Inserted should be Less than QTY found in Store !');
      alert(type[i].value);
      alert(old[i].value);
      return type[i].value = 0;

    }

  }
}

</script>

I've used alert in javascript to test if correct values are collected and it seems that it works as needed, but NOT for validating if new qty is more than old qty, it seems that it works only for the first 4 rows then it stucks and starts validating the new qty in any row WITH the first old qty row .. I hope this makes sense to you.

Any alternative or suggestion will be appreciate it.

Thanks Guy

Answer 1

One problem with your code is that everytime you input value onto nqty and on onchange, the function check_not_large function gets called and it not only validating current row nqty and cqty values but also all the previous nqty and cqty row values.If your purpose is to check only if current row nqty value greater than cqty value, a much neater code will be to give some unique id value to each nqty and cqty elements.The code for the same can be optimized as given below.

PHP Code

$query = "SELECT * from store_00_transfers";
$result = mysql_query($query);
while($row = mysql_fetch_assoc($result)){
echo "<tr>
        <td align=center width=19%>{$row['item_no']}</td>
          <td align=center>
             //instead of name attribute you can give an id here and also assuming $row['item_no'] is unique
             <input type='text' value='{$row['qty']}'    id='cqty{$row['item_no']}' readonly >//assuming item_no is unique
         </td>
         <td align=center>
           //instead of name attribute you can give an id here and also  assuming $row['item_no'] is unique
           <input type='number' min='0' id="nqty{$row['item_no']}"    onChange='check_not_large({$row['item_no']});' value='0'>
        </td>
        </tr>";        

}

Javascript Code

<script>
    function check_not_large(item_no) {
       var cqtvVal=document.getElementById("cqtv"+item_no).value;
       var nqtvVal=document.getElementById("nqtv"+item_no).value;
       //checking if typed value is greater than old value
       if(nqtvVal>cqtvVal)
       {
         //write whatever code you want to do like give a warning message or make the nqtv value reset to zero etc
       }   

   }
 </script>