MySQL & PHP References: Calculate Total Multiple Checkbox and Input Javascript

Monday, April 24, 2017

Calculate Total Multiple Checkbox and Input Javascript

Very Simple...


<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

function totalIt() {
  var input = document.getElementsByName("product");
  var ifare = document.getElementById('ifare').value;
  //document.getElementById("tfare").value = "$" + ifare.toFixed(2);
  
  var total = 0;
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      
   
   total += parseFloat(input[i].value);
  
  var tfare = (parseFloat(ifare) + parseFloat(total));
  document.getElementById("tfare").value = "$" + tfare.toFixed(2);
  //alert('ifare : $ ' + tfare);
  
 }
  }
  
  
  document.getElementById("total").value = "$" + total.toFixed(2);
  
  var tfare = ifare + document.getElementById("total").value;
  
  
}
</script>
</head>
<body>
<form action="" id="theForm">
Based Fare : <input type="text" name="ifare" id="ifare" value="142.18" /><br>
        <fieldset>
            <legend>
               Fare Details
            </legend>
            <label>
                <input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/>
                Toddler Seats $12.95
            </label>
            <label>
                <input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/>
                Airport Toll $5.99
            </label>
            <label>
                <input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/>
                Tax $1.99
            </label>
   <label>
                <input name="product" value="19.99" type="checkbox" id="p4" onclick="totalIt()"/>
                Driver Tips $19.99
            </label>
   <label>
                <input name="product" value="41.99" type="checkbox" id="p5" onclick="totalIt()"/>
                Fuel Surcharge $41.99
            </label>
            <label>
                Total 
                <input value="$0.00" readonly="readonly" type="text" id="total"/>
                <input value="$0.00" readonly="readonly" type="text" id="tfare"/>
    
            </label>
        </fieldset>
        <input value="Submit" type="submit"/>
        <input value="Reset" type="reset"/>
    </form>
</body>
</html>

MySQL & PHP References

Search This Blog

Monday, April 24, 2017

Calculate Total Multiple Checkbox and Input Javascript

No comments:

Post a Comment

content-wide advt