mardi 27 octobre 2015

Javascript: Calculate real time form input which also changes with checkboxes

I have a form where I need to calculate GST (Goods Services Tax) real time inline on the form

(GST = Price/11)

which I have managed to do with the following script.
But it also needs to be changed if I click on

checkbox (exc. GST) means GST = 10% of the price

and

checkbox (GST Free) means GST = 0


HTML Form:

<form class="form-horizontal" name="newItemForm" id="newItemForm" action="" method="post" enctype="multipart/form-data">
              <div class="form-group">
                <input type="text" class="form-control" name="itemName" id="itemName" style="text-transform:capitalize" placeholder="Enter Item Name" autocomplete="off">
              </div>
              <div class="form-group">
                <input type="text" class="form-control" name="price" id="price" placeholder="Item Price" onkeyup="calculateGST()" autocomplete="off"> 
              </div>
              <div>
                <label class="checkbox-inlibe">
                  <input type="checkbox" Value="incGST"> Exc. GST
                </label>
                <label class="checkbox-inlibe">
                  <input type="checkbox" Value="FRE"> GST Free
                </label>
              </div>
              <div class="form-group">
                <input type="text" class="form-control calGST" name="gst" id="gst" placeholder="GST" autocomplete="off" disabled>
              </div>
              <div class="form-group">
                <input type="number" class="form-control" name="unitsPerCTN" id="unitsPerCTN" value="" placeholder="Units Per CRT" autocomplete="off">
              </div>
              <div class="form-group">
                <input type="text" class="form-control" name="supplier" id="supplier" style="text-transform:capitalize" placeholder="Supplier" autocomplete="off">
              </div>
              <button type="submit" name="submit" id="submit" class="btn btn-success">Submit</button>
              <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </form>

SCRIPT:

<script>
function calculateGST() {
    var priceStr =document.newItemForm.price.value;
    if (!priceStr)
        priceStr = '0';
    var price = parseFloat(priceStr);
    document.newItemForm.gst.value = price / 11;
}
</script>




Aucun commentaire:

Enregistrer un commentaire