I have a question about JQuery Min Max Validation looping through dynamic created input items. In my php page i have a dynamic table who loops through the data in the DB. Sometimes i have an table with 3 input Items (Cells) sometimes with 6 or 12 input items. With jquery i found to validate min - max value of data, but it works only for the first input item. How can loop throug all the input item to get the same min max validation?
Here the JQuery code:
$(document).ready(function(){
$("input").click(function(){
var enteredValue = $("input:#value_one").val();
var min=1;
var max = 3;
var num = parseInt(enteredValue);
if (min > num || max < num) {
alert('Number ' + num + ' is not a number between ' + min + ' and ' + max);
return false;
}
});
});
Here apart of the PHP HTML Code:
foreach($datas as $idactivite=>$dat){
$totalactiv=0;
$nbdiviseur=0;
foreach($dat as $dd){
$totalactiv+=$dd["note"];
$nbdiviseur++;
}
$mamoyactiv=$totalactiv/$nbdiviseur;
$position=3;
$mamoyactiv = substr($mamoyactiv, 0, $position);
$moyenneverticale[$idactivite]=$mamoyactiv;
// Here the input Item who loops through the DB Query to get them values:
$htmldroit.="<td id='myguaNote' bgcolor='$bgcolor' align='center'>
<input name='".$idactivite."_".$idagent."' id='value_one' maxlength='1' class='grand' value='".$dat[$idagent]["note"]."' ></td>";
$totalfamille+=$dat[$idagent]["note"];
$TabRes[$ind] += $dat[$idagent]["note"];
$TabObj[$ind] = " ";
$TabResColor[$ind]=0;
$ind++;
}
Somebody any ideas?
THX in advance
I think you're not really selecting the input field which was actually clicked.
Replace var enteredValue = $("input:#value_one").val() with
var enteredValue = $(this).val();
The callback function from click holds a reference to the clicked DOM element in the this keyword. wrap it in $() to make it a jQuery object and finally call val() on it.
Edit: To validate multiple input fields on button click I used a helper class validate. Assuming all input fields you want to validate have this class you can bind some code to submit button's on click:
$("#submitButton").click(function(){
$(".validate").each(validateField);
});
First all elements having the class validate will be selected and on this collection we call jQuery's each() which takes a function handle as argument. This function (validateField in this case) should take to input arguments (index and element, see the documentation for more details - if you think of a strange for for a "for in"-loop you're not far off.).
I moved the your validation code in this function and simply replaced $(this) by $(element)
few tips
if you are working with dynamic data then don't use simple 'click' function, instead try .on ( with jQuery 1.7+)
$('document').on('click', 'input', function(){
var enteredValue = $(this).val();
//your rest of code
});
|| if (min > num || max < num) {
change to
// For a number not between min and max
if (num < min || num > max) {
// For a number between min and max
if (num >= min && num <= max) {
For testing:
<script>
function test(){
$html = document.getElementById("msg");
num = 100;
min = 10;
max = 100;
if (num < min || num > max) {
$html.innerHTML = "Num is not between min and max";
return;
}
if (num >= min && num <= max) {
$html.innerHTML = "Num is between min and max";
return;
}
}
</script>
<body onload="test()">
<div id="msg" style="border:1px solid #000000; height:100px">Answer has not been found!</div>
</body>
It sounds like you might be looking for .on(), which will keep things up-to-date as the page changes, whereas the click you have is just on the state of the page when it's created. Try:
$("input").on("click",function(){
Try this
//========== Prototype to find out min value in an Array=========================
Array.prototype.min = function()
{
return Math.min.apply(null, this)
}
//============= Jquery Scripting===================================================
$selector=$("input"); //Your selector which is cursoring your inputs
$aryVal=new Array; //Define an Array
$selector.each(function() //Iterate to all the input
{
$aryVal.push(this.value); //push the value to array
});
var min = Math.min.apply(null, $aryVal); //Getting min value from array
alert(min);
Good practice when creating a dynamic amount of elements which are being used to inject a variable somewhere is:
So if I were to generate a number of inputs 1 to 100
for ($i = 1; $i <= 100; $i++)
{
$IdAndName = "input" . $i;
echo("<input type='text' id='" . $IdAndName . "' name='" . $IdAndName . "' class='myStyle'/><br>
");
}
Now you would have HTML elements with ID input1 to input100
You can then use the JQuery click event as you have, then use $(this).val() to retrieve it's value on click.