How do I make a limit (error warning) for the number of numbers or units checked (JavaScript)?
hi.this is my code. How can I make a limit on the number of verified numbers or units?
for ex: if sum ≤12 and ≥20 show error log (result) when submit button is pressed.
<script type="text/javascript">
function chkcontrol(j)
{
var sum=0;
for(var i=0; i < document.form1.ckb.length; i++){
if(document.form1.ckb[i].checked){
sum = sum + parseInt(document.form1.ckb[i].value);
}
document.getElementById("msg").innerHTML="Sum :"+ sum;
if(sum >20){
sum = sum - parseInt(document.form1.ckb[j].value);
document.form1.ckb[j].checked = false ;
alert("error:Total of yore choose is more than 20 units")
//return false;
}
document.getElementById("msg").innerHTML="total units :"+ sum;
}
}
</script>
+3
source to share
1 answer
This should fix your problem.
var form = document.forms.myform,
elem = form.elements,
inputVals = document.getElementsByClassName("inputVals");
form.onsubmit = function(event){
event.preventDefault();
var totalSum = 0;
for(var i = 1; i <= inputVals.length; i++) {
var input = document.getElementById("value" + i)
if (input.checked) {
totalSum += parseInt(input.value);
}
}
if (totalSum < 12 || totalSum > 20) {
alert("error:Total of your choise is more than 20 or less 12 units")
}
else {
document.getElementById("msg").innerHTML="total units :" + totalSum;
}
}
.center{text-align:center;margin-top:1em;}
<form name="myform" actopm="/echo/html/" method="post">
<table>
<tr>
<th>1</th>
<td><input class="inputVals" value=1 type="checkbox" id="value1" placeholder="input value"/></td>
</tr>
<tr>
<th>2</th>
<td><input class="inputVals" value=2 type="checkbox" id="value2" placeholder="input value"/></td>
</tr>
<tr>
<th>3</th>
<td><input class="inputVals" value=3 type="checkbox" id="value3" placeholder="input value"/></td>
</tr>
<tr>
<th>4</th>
<td><input class="inputVals" value=4 type="checkbox" id="value4" placeholder="input value"/></td>
</tr>
<tr>
<th>5</th>
<td><input class="inputVals" value=5 type="checkbox" id="value5" placeholder="input value"/></td>
</tr>
<tr>
<th>6</th>
<td><input class="inputVals" value=6 type="checkbox" id="value6" placeholder="input value"/></td>
</tr>
<tr>
<th>7</th>
<td><input class="inputVals" value=7 type="checkbox" id="value7" placeholder="input value"/></td>
</tr>
<tr>
<th>8</th>
<td><input class="inputVals" value=8 type="checkbox" id="value8" placeholder="input value"/></td>
</tr>
</table>
<div class="center">
<input type="submit" value="submit"/>
</div>
</form>
<div id="msg">
</div>
+3
source to share