[FIXED] How to retrieve and modify textbox values with jQuery inside a php loop

Issue

I want to provide a restriction to input fields inside a PHP loop, so that in each of the looped input fields, a user can not insert a value greater than 100. If the value is greater than 100, the user will be alerted that the value is greater than 100 and the field will be reset to empty ("") so that he can write the correct value. My issue is that the code only functions for the first input field and not for the rest of the loop.

Here is what I have tried.

while ($row = mysqli_fetch_array($query)) {
    echo "<label>Name</label>
    <input type='text' class='form-control' name='name' id='name' value='".$row['name']."' />";
    echo "<label>Score</label>
    <input type='text' class='form-control' name='score' id='score' value='' />";
}


$(document).ready(function(){
$("#score").keyup(function(){                
    var score=$(this).val();
    if (score > 100) {
        alert("Score cannot be greater than 100");
        $('#score').val("");
    }
});

});

Solution

Please try this

php:

while ($row = mysqli_fetch_array($query)) {
    echo "<label>Name</label>
    <input type='text' class='form-control' name='name' id='name' value='".$row['name']."' />";
    echo "<label>Score</label>
    <input type='text' class='form-control score' name='score' id='score' value='' />";
}

js:

    $(document).ready(function(){
        $(".score").keyup(function(){                
            var score=$(this).val();
            if (score > 100) {
                alert("Score cannot be greater than 100");
                $(this).val("");
            }
        });
    });

Answered By - Delowar Hossen

Answer Checked By - Gilberto Lyons (PHPFixing Admin)