How to make limit(error alert) for checked numbers or units sum(JavaScript)?

Question

hi.this is my code. How can I make limit for checked numbers or units sum?

for ex:if sum is ≤12 and ≥20 show error log(result) when press submit button.

 <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> 

Answer 1

This should solve 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>