Created
October 12, 2016 14:52
-
-
Save chancesmith/da7ac484690dd5c979da0fd92002d9b6 to your computer and use it in GitHub Desktop.
Update order subtotal with jQuery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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