Bootstrap Snippet Currency Counter using HTML Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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);
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Currency Counter"
Bootstrap 3.3.0 Snippet by ajayks2u

Related: See More

Questions / Comments:

"Currency Counter" Bootstrap 3.3.0 Snippet by ajayks2u

Related: See More

Questions / Comments:

"Currency Counter"
Bootstrap 3.3.0 Snippet by ajayks2u