Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
​
<div class="page">
<ul>
    <li>Cubic Yards<span><input type="text" name="Quantity" value="" class="quantity"></span></li>
    <li>Price <span><input type="text" name="Price" value="25.50" class="price"></span></li>
    <li> Total <span><input type="text" name="Total" value="0.00" class="total"></span></li>
</ul>
​
<div id="foo"></div>
<input type="submit" value="ADD MORE" class="button" id="click">
<ul>
    <li>Total Cubic Yards:<input id="cubicYards" type="text" name="cubicYards" value="0"></li>
    <li>Total Price:<input id="amount" type="text" name="totalPrice" value="0.00"></li>
</ul>
  <input type="button" id="calculate" value="Calculate"/>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</div>
</body>
</html>
 
// add fields
$( "#click" ).click(function() {
  $( "#foo" ).append(
    '<ul>' + '\n\r' +
    '<li>Cubic Yards <span><input type="text" name="Quantity" value="" class="quantity"></span></li>' + '\n\r' +
    '<li>Price <span><input type="text" name="Price" value="" class="price"></span></li>' + '\n\r' +
    '<li>Total <span><input type="text" name="Total" value="0.00" class="total"></span></li>' + '\n\r' +
    '</ul>' 
  );
});
​
$('#calculate').click(function() {
  calculateQuantity();
});
​
// function    
function calculateQuantity() {
  var sum = 0;
  
  $(".quantity").each(function() {
    var q = parseFloat($(this).val());
    
    if(!isNaN(q)) {
      $(this).val(q.toFixed(2));
      sum += q;
    }
  });
  
  $('#cubicYards').val(sum.toFixed(2));
};
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers