如何使用onchange事件？

Question

This is my code where if i put quantity then it will calculate it and show it in total amount. my problem is that if i change my quantity in between process my total amount is not change.

How to do it onchange quantity total amount have to different

 <script> function valid(obj) { var frm=document.getElementById("frm"); var qty=parseInt(document.getElementById("quantity").value); var price=parseInt(obj.value); var total=parseInt(document.getElementById("total").value); if(isNaN(total)) { total=0; } if(obj.checked==true) { total=total+(qty*price); document.getElementById("total").value=total; } else { total=total-(qty*price); document.getElementById("total").value=total; } /*for(var i=0;i<frm.length;i++) { if(frm[i].type=="checkbox") { if(frm[i].checked==true) { total=total+(parseInt(frm[i].value)*qty); } } }*/ document.getElementById("total").value=total } </script> 

 <form action="abc.html" method="post" id="frm" onsubmit="return valid(this);"> <table> <tr> <th colspan="2">Qualification</th> </tr> <tr> <td><input type="checkbox" name="check_list[]" value="1000" onClick="valid(this);" /></td><td>BCA</td> <td><input type="checkbox" name="check_list[]" value="2000" onClick="valid(this);" /></td><td>MCA</td> </tr> <tr> <td><input type="checkbox" name="check_list[]" value="1200" onClick="valid(this);" /></td><td>BBA</td> <td><input type="checkbox" name="check_list[]" value="1000" onClick="valid(this);" /></td><td>MBA</td> </tr> <tr> <td colspan="2"><input type="text" name="quantity" id="quantity" placeholder="Quantity"></td> </tr> <tr> <td colspan="2"><input type="text" name="total" id="total" value="" placeholder="Total"></td> </tr> <tr> <td colspan="2"><input type="button" onClick="valid();" name="submit" value="Send" /></td> </tr> </table> </form> 

Answer 1

Define var isFormSubimited = false; Set isFormSubimited = true in valid function.

Add " onchange='onQuantityChange()' " to quantity input element.

Add following function.

function onQuantityChange()
{
  if(isFormSubimited && $("input[type='checkbox']:checked").length > 0)
  {
    //var _form = document.getElementById('frm');
    //_form.submit();
    valid();
  } 
}