如何使用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>

</div>

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();
  } 
}