<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Currency Counter</legend> <div class="form-group"> <label class="col-md-8" style="text-align:center;">Notes</label> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="d100">$100 x </label> <div class="col-md-2"> <input id="d100" name="d100" type="text" placeholder="notes" class="form-control input-md"> </div> <label class="col-md-2" for="d100" id="ld100">0</label> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="d50">$50 x </label> <div class="col-md-2"> <input id="d50" name="d50" type="text" placeholder="notes" class="form-control input-md"> </div> <label class="col-md-2" for="d50" id="ld50">0</label> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="d20">$20 x </label> <div class="col-md-2"> <input id="d20" name="d20" type="text" placeholder="notes" class="form-control input-md"> </div> <label class="col-md-2" for="d20" id="ld20">0</label> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="d10">$10 x </label> <div class="col-md-2"> <input id="d10" name="d10" type="text" placeholder="notes" class="form-control input-md"> </div> <label class="col-md-2" for="d10" id="ld10">0</label> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="d5">$5 x </label> <div class="col-md-2"> <input id="d5" name="d5" type="text" placeholder="notes" class="form-control input-md"> </div> <label class="col-md-2" for="d5" id="ld5">0</label> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="d1">$1 x </label> <div class="col-md-2"> <input id="d1" name="d1" type="text" placeholder="notes" class="form-control input-md"> </div> <label class="col-md-2" for="d1" id="ld1">0</label> </div> <div class="form-group"> <label class="col-md-8" style="text-align:center;">COINS</label> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="c1">Dollar x </label> <div class="col-md-2"> <input id="c1" name="c1" type="text" placeholder="coins" class="form-control input-md"> </div> <label class="col-md-2" for="c1" id="lc1">0</label> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="c50">Half Dollar x </label> <div class="col-md-2"> <input id="c50" name="c50" type="text" placeholder="coins" class="form-control input-md"> </div> <label class="col-md-2" for="c50" id="lc50">0</label> </div> <div class="form-group"> <label class="col-md-4 control-label" for="c25">Quarters x </label> <div class="col-md-2"> <input id="c25" name="c25" type="text" placeholder="coins" class="form-control input-md"> </div> <label class="col-md-2" for="c25" id="lc25">0</label> </div> <div class="form-group"> <label class="col-md-4 control-label" for="c10">Dime x </label> <div class="col-md-2"> <input id="c10" name="c10" type="text" placeholder="coins" class="form-control input-md"> </div> <label class="col-md-2" for="c10" id="lc10">0</label> </div> <div class="form-group"> <label class="col-md-4 control-label" for="c05">Nickle x </label> <div class="col-md-2"> <input id="c05" name="c05" type="text" placeholder="coins" class="form-control input-md"> </div> <label class="col-md-2" for="c05" id="lc05">0</label> </div> <div class="form-group"> <label class="col-md-4 control-label" for="c01">Penny x </label> <div class="col-md-2"> <input id="c01" name="c01" type="text" placeholder="coins" class="form-control input-md"> </div> <label class="col-md-2" for="c01" id="lc01">0</label> </div> <div class="form-group"> <label class="col-md-4 control-label">Total</label> <div class="col-md-2"> <span id="total" name="total" class="form-control input-md" >0</span> </div> </div> </fieldset> </form>

$(document).ready(function(){ total = 0; $("#d100").change(function(){ val = eval($("#d100").val()); det = val * 100; total = total + det; $("#ld100").html(det); $("#total").html(total); }); $("#d50").change(function(){ val = eval($("#d50").val()); det = val * 50; total = total + det; $("#ld50").html(det); $("#total").html(total); }); $("#d20").change(function(){ val = eval($("#d20").val()); det = val * 20; total = total + det; $("#ld20").html(det); $("#total").html(total); }); $("#d10").change(function(){ val = eval($("#d10").val()); det = val * 10; total = total + det; $("#ld10").html(det); $("#total").html(total); }); $("#d5").change(function(){ val = eval($("#d5").val()); det = val * 5; total = total + det; $("#ld5").html(det); $("#total").html(total); }); $("#d1").change(function(){ val = eval($("#d1").val()); det = val * 1; total = total + det; $("#ld1").html(det); $("#total").html(total); }); $("#c1").change(function(){ val = eval($("#c1").val()); det = val * 1; total = total + det; $("#lc1").html(det); $("#total").html(total); }); $("#c50").change(function(){ val = eval($("#c50").val()); det = val * 0.50; total = total + det; $("#lc50").html(det); $("#total").html(total); }); $("#c25").change(function(){ val = eval($("#c25").val()); det = val * 0.25; total = total + det; $("#lc25").html(det); $("#total").html(total); }); $("#c10").change(function(){ val = eval($("#c10").val()); det = val * 0.10; total = total + det; $("#lc10").html(det); $("#total").html(total); }); $("#c05").change(function(){ val = eval($("#c05").val()); det = val * 0.05; total = total + det; $("#lc05").html(det); $("#total").html(total); }); $("#c01").change(function(){ val = eval($("#c01").val()); det = val * 0.01; total = total + det; $("#lc01").html(det); $("#total").html(total); }); });