Skip to content

Instantly share code, notes, and snippets.

@chancesmith
Created October 12, 2016 14:52
Show Gist options
  • Select an option

  • Save chancesmith/da7ac484690dd5c979da0fd92002d9b6 to your computer and use it in GitHub Desktop.

Select an option

Save chancesmith/da7ac484690dd5c979da0fd92002d9b6 to your computer and use it in GitHub Desktop.
Update order subtotal with jQuery
<div class="summary_block">
<h3 id="title-price" content="574.8">Books - $574.80</h3>
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
<div class="quantity">
<div class="filter_cnt pull-left">
<label for="Quantity">Quantity</label>
<div class="filter">
<select id="Quantity" name="quantity" class="selectpicker" tabindex="-98">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="cost_block">
<h3>Order Summary</h3>
<p>Quantity: <span id="subtotal-quantity">4</span></p>
<div class="clearfix"></div>
<p>Subtotal: <span id="subtotal-amount">$2299.20</span></p>
</div>
<button type="submit" name="add" id="AddToCart" class="btn btn-primary">
<span id="AddToCartText">Add to Cart</span>
</button>
</form>
<div class="clearfix"></div>
</div>
// demo: https://jsfiddle.net/chancesmith/4u7tdc3p/
//collect item's current price
var price = $('#title-price').attr("content");
//on quantity select change
$( "select#Quantity" )
.change(function () {
//grab new quantity
var quantity = $(this).val();
//udpate subtotal box
// update quantity
// update subtotal
$("#subtotal-quantity").text(quantity);
var newSubtotal = price * quantity;
$("#subtotal-amount").text( "$" + newSubtotal.toFixed(2) );
})
.change();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment