检查文本框的数量是否大于输入的文本框数组的数量

Question

I am trying to compare value of a single text box value "totalmarkstoall" with multiple array of text box's "marksscored" , the below my java script is comparing as well on key up function.

what am unable to do is if the value of "marksscored" that perticuler text box is greater then the "totalmarkstoall" then is shows the pop up :But it should erase the value also or should not allow to enter.

 function scorecompare(idval) { var marksscored = idval; var totalmarkstoall = document.getElementById("totalmarkstoall").value; if (parseInt(marksscored) > parseInt(totalmarkstoall)) { alert("greater than Total Mrks"); } else { } } 

 <input id="totalmarkstoall" type="number" style="border: 1px solid #dbdbdb;" placeholder="Enter Total Marks"></input> <table> <tr> <td> <input type="text" name="marksscored[]" id="marksscored[0]" value="" onkeyup="scorecompare(this.value);"/> </td> </tr> <tr> <td> <input type="text" name="marksscored[]" id="marksscored[1]" value="" onkeyup="scorecompare(this.value);"/> </td> </tr> <tr> <td> <input type="text" name="marksscored[]" id="marksscored[2]" value="" onkeyup="scorecompare(this.value);"/> </td> </tr> </table> 

Answer 1

If you do something like this you know which inputfield the value came from.

HTML:

<table>
<tr>
    <td>
        marksscored Array of text box's
    </td>
</tr>
<tr>
    <td>
        <input type="text" name="marksscored[]" id="marksscored[0]" value="" onkeyup="scorecompare(this);">
    </td>
</tr>
<tr>
    <td>
        <input type="text" name="marksscored[]" id="marksscored[1]" value="" onkeyup="scorecompare(this);">
    </td>
</tr>
<tr>
    <td>
        <input type="text" name="marksscored[]" id="marksscored[2]" value="" onkeyup="scorecompare(this);">
    </td>
</tr>

</table>

JS:

function scorecompare(idval) {
   var marksscored = idval;

   var totalmarkstoall = document.getElementById("totalmarkstoall").value;
   if (parseInt(marksscored.value) > parseInt(totalmarkstoall))

   {
    alert("greater then  Total Mrks");
   //do things with inputfield marksscored
   } else {

   }
 }

Answer 2

You can do something like this using jquery :

1. On keyup calculate the sum of all text fields

2. Check if the is greater than the Total

3. If it is the case Alert and erase the current text field $(this).val("");

see fiddle

Update:

Fiddle

Answer 3

Try this. Use keyUp event like this way.

 $( ".marksscored" ).keyup(function() { var marksscored = $(this).val(); var totalmarkstoall = document.getElementById("totalmarkstoall").value; if (parseInt(marksscored) > parseInt(totalmarkstoall)) { alert("greater then Total Mrks"); $(this).val(""); } else { // do something } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <input id="totalmarkstoall" type="number" STYLE=" border: 1px solid #dbdbdb;" placeholder="Enter Total Marks"></input> <table> <tr> <td> <input type="text" class="marksscored" name="marksscored[]" id="marksscored[0]" value="" /> </td> </tr> <tr> <td> <input type="text" class="marksscored" name="marksscored[]" id="marksscored[1]" value="" /> </td> </tr> <tr> <td> <input type="text" class="marksscored" name="marksscored[]" id="marksscored[2]" value="" /> </td> </tr> </table>