CODEWITHSUNDEEP
javascriptcalculator
user23524697
user23524697

Reputation: 147

How to convert a manual sales calculator script into an automatic sales calculator script?

I have this manual javascript

<head>
    <script type="text/javascript">
    function applyTax(){
      var inputAmount = document.getElementById( 'dollars' ).value;
      var salesTaxGst = (inputAmount / 100) * 5;
      var salesTaxPst =  (inputAmount / 100) * 9.975;
      var totalAmount = (inputAmount*1) + (salesTaxGst * 1) +(salesTaxPst * 1) ;

      document.getElementById( 'requestedAmount' ).innerHTML = inputAmount;
      document.getElementById( 'requestedTaxGst' ).innerHTML = salesTaxGst;
      document.getElementById( 'requestedTaxPst' ).innerHTML = salesTaxPst;
      document.getElementById( 'requestedTotal' ).innerHTML = totalAmount;
    }

    </script>
</head>

And the html

<body>

<input type="text" id="dollars" />
<input type="button" onclick="applyTax();" value="Calculate" />

<div id="requestedAmount"> </div>
<div id="requestedTaxGst"> </div>
<div id="requestedTaxPst"> </div>
<div id="requestedTotal"> </div>

</body>
</html>

So basically this script needs user to input data manually to calculate taxes. I'm trying to convert it into an automatic sales tax calculator for say an eCommerce site.

Cart page:

    <div id="store_container">
            <div id="store">


                <%-- Left Navigation --%>
                <div style="text-align: center;" id="category">
                    <div id="items"><fmt:message key='summary'/>
                    </div>


                    <div class="cat_row">

                        <div style="text-align: left;"><span style="font-weight: bold;"><span
                                    style="background-color: rgb(239, 239, 239);"><fmt:message key='CartCategoryLabel1'/></span></span><br>


                            <%-- Start of Left Nav Widgets--%>
                            <ul style="list-style-type: none;">

                                <%-- clear cart widget --%>
                                <c:set var="value">
                                <c:choose>
                                <%-- if 'selectedCategory' session object exists, send user to previously viewed category --%>
                                        <c:when test="${!empty selectedCategory}">

                                        </c:when>

                                        <%-- otherwise send user to welcome page --%>
                                <c:otherwise>

                                    </c:otherwise>
                            </c:choose>
                         </c:set>                     
                <c:url var="url" value="${value}"/>
                <li><a href="viewCart?clear=true"><fmt:message key='ClearCart'/></a></li>

                    <%-- checkout widget --%>
                    <c:if test="${!empty cart && cart.numberOfItems != 0}">
                <li><a href="checkout"><fmt:message key='Checkout'/></a></li>
                </c:if>


                                <%-- continue shopping widget --%>
        <c:set var="value">
            <c:choose>
                <%-- if 'selectedCategory' session object exists, send user to previously viewed category --%>
                <c:when test="${!empty selectedCategory}">
                    category
                </c:when>
                <%-- otherwise send user to welcome page --%>
                <c:otherwise>
                    index.jsp
                </c:otherwise>
            </c:choose>
        </c:set>
                                <li style="background-color: rgb(198, 255, 201);"><a href="${value}"><fmt:message key='ContinueShopping'/></a></li>
                            </ul>

                            <br>
                            <span style="text-decoration: underline;"></span>
                        </div>
                    </div>
                    <%-- End of Left Navigation --%>


                <%-- Start of Cart Breadcrumbs --%>
                <div style="text-align: center;" id="thumbnails">
                    <div id="items">My shopping cart<br>
                    </div>
                    <br>

                    <div style="text-align: left; font-weight: bold;">
                        <div style="text-align: center;"><big></big></div>

                        <%-- Subtotal of cart--%>
                        <c:if test="${!empty cart && cart.numberOfItems != 0}">
                            <div style="text-align: center;" class="item_col"><big><fmt:message key='Subtotal'/> (${cart.subtotal})<br>
                                </big></div>
                            <big></big>
                        </c:if>
                        <%-- End Subtotal of cart--%>




                        <%-- Number of items in cart--%>
                        <div style="text-align: center;" class="item_col2">

                            <c:choose>
        <c:when test="${cart.numberOfItems > 1}">
            <big><fmt:message key='YouHave'/> (${cart.numberOfItems}) <fmt:message key='ItemsInYourCart'/><br></big>
        </c:when>
        <c:when test="${cart.numberOfItems == 1}">
            <big><fmt:message key='YouHave'/> (${cart.numberOfItems}) <fmt:message key='ItemsInYourCart'/><br></big>
        </c:when>
        <c:otherwise>
            <big><fmt:message key='EmptyShoppingCart'/><br></big>
        </c:otherwise>
    </c:choose>
                        </div>

                        <div style="text-align: center;"><big></big></div>
                    </div>
                    <big><br style="font-weight: bold;">
                    </big>
                    <%-- End of cart Breadcrumbs --%>       



                    <%-- Start of Products Table--%>        
                    <div style="font-weight: bold;" id="thumb_container"> 
                        <div style="text-align: left;">
                            <table style="text-align: left; width: 100%;" border="0" cellpadding="0"
                                   cellspacing="0">

                                <c:forEach var="cartItem" items="${cart.items}" varStatus="iter">
                                    <c:set var="product" value="${cartItem.product}"/>

                                    <tbody>
                                        <tr class="${((iter.index % 2) == 0) ? 'lightBlue' : 'white'}">
                                            <td
                                                style="vertical-align: middle; width: 196px; text-align: center; height: 140px;"><img class="img" src="${initParam.productImagePath}${product.name}.jpg"<br>
                                            </td>
                                            <td
                                                style="vertical-align: middle; width: 164px; text-align: center; height: 140px;">${product.name}<br>
                                            </td>
                                            <td

                                                style="vertical-align: middle; width: 100px; text-align: center; height: 140px;">${product.price}<br>
                                            </td>
                                            <td
                                                style="vertical-align: middle; width: 180px; text-align: center; height: 140px;"><form action="addToWishlist" method="post"><br><br> <input
name="productId" value="${product.id}" type="hidden"> <input class="submit"
value="Add To Wishlist" type="submit"></form><br>
                                            </td>
                                            <td
                                                style="vertical-align: middle; text-align: center; height: 140px; width: 180px; padding-top:35px;"><form action="updateCart" method="post">
                                                    <input type="hidden"
                                                           name="productId"
                                                           value="${product.id}">

                                                    <input type="text"
                                                           maxlength="2"
                                                           size="2"
                                                           value="${cartItem.quantity}"
                                                           name="quantity"
                                                           style="margin:0px">

                                                    <input class="updateButton"  type="submit"
                                                           name="submit"
                                                           value="update">

                                                </form><br>
                                            </td>
                                        </tr>
                                    </tbody>

                                </c:forEach>
                            </table>


                            <%-- End of Products Table--%>

So I'm thinking in order to convert the script to calculate cart subtotal automatically I would only have to change few things around by declaring different variables?

Example:

<head>
<script type="text/javascript">
function applyTax(){
  var ${cart.subtotal} = document.getElementById( 'cartSubtotal' ).value;
  var salesTaxGst = (${cart.subtotal} / 100) * 5;
  var salesTaxPst =  (${cart.subtotal} / 100) * 9.975;
  var totalAmount = (${cart.subtotal}*1) + (salesTaxGst * 1) +(salesTaxPst * 1) ;

  document.getElementById( 'cartSubtotal' ).innerHTML = ${cart.subtotal} ;
  document.getElementById( 'taxGst' ).innerHTML = salesTaxGst;
  document.getElementById( 'taxPst' ).innerHTML = salesTaxPst;
  document.getElementById( 'cartTotal' ).innerHTML = totalAmount;
}
</script>
</head>


<html>
<body>

<input type="text" id="cartSubtotal" />
<input type="button" onload="applyTax();" value="Calculate" />

<div id="cartSubtotal"> </div>
<div id="taxGst"> </div>
<div id="taxPst"> </div>
<div id="cartTotal"> </div>

</body>
</html>

------ EDIT ----

For a better vision, this is a screenshot from Forever 21 checkout process. You see, at the end of the page, they display the total amount = cart subtotal + tax + shipping. This is exactly what i'm trying to do with a script.

Snapshot: FE21 Order Summary

Upvotes: 1

Views: 723

Answers (2)

Arnaud Bertrand
Arnaud Bertrand

Reputation: 1461

I think that this is what you were trying to do:

<html>

<body>
  <input type="text" id="cartSubtotal" />
  <input type="button" onClick="applyTax();" value="Calculate" />
  <div id="cartSubtotal"></div>
  <div id="taxGst"></div>
  <div id="taxPst"></div>
  <div id="cartTotal"></div>
  <script>
    function applyTax() {
      var cartSubtotal = parseFloat(document.getElementById('cartSubtotal').value);
      if (!isNaN(cartSubtotal)){
        var salesTaxGst = (cartSubtotal / 100) * 5;
        var salesTaxPst = (cartSubtotal / 100) * 9.975;
        var totalAmount = cartSubtotal + salesTaxGst + salesTaxPst;
        document.getElementById('cartSubtotal').innerHTML = "Subtotal: " + cartSubtotal;
        document.getElementById('taxGst').innerHTML = "Sales tax GST: " + salesTaxGst;
        document.getElementById('taxPst').innerHTML = "Sales tax PST: " + salesTaxPst;
        document.getElementById('cartTotal').innerHTML = "Total amount: " + totalAmount;
      }
    }
  </script>
</body>

</html>

However even after keeping on reading your subject things are not clear for you I think. You have a server that generates pages, everything that is generated will process at the server side, therefore you can use your notations such as or ${..}. But once this page is sent to the client (where the client is using javascript) you cannot change those informations anymore because you are not on a server anymore.

If you want to update data on your server you will have to contact the server again via an HTTP request or an Ajax call.

Upvotes: 1

Cam Cecil
Cam Cecil

Reputation: 328

This is a solution to my best interpretation to what you want. To me it seems like you want to take the displayed subtotal and calculate the taxes via javascript. This probably isn't the best way to go about it as I assume you'll be using those values later during the checkout process and it'd behove you to calculate those values on the backend then display them rather than through javascript, but I digress.

Javascript:

function applyTax(){
  var cartSubTotal = parseFloat(document.getElementById( 'cartSubtotal' ).innerHTML);
  console.log(cartSubTotal);
  var salesTaxGst = (cartSubTotal / 100) * 5;
  var salesTaxPst =  (cartSubTotal / 100) * 9.975;
  var totalAmount = (cartSubTotal*1) + (salesTaxGst * 1) +(salesTaxPst * 1) ;

  document.getElementById( 'cartSubtotal' ).innerHTML = cartSubTotal.toFixed(2);
  document.getElementById( 'taxGst' ).innerHTML = salesTaxGst.toFixed(2);
  document.getElementById( 'taxPst' ).innerHTML = salesTaxPst.toFixed(2);
  document.getElementById( 'cartTotal' ).innerHTML = totalAmount.toFixed(2);
}

// Call the applyTax() when the window finishes loading...
window.onload = function() {
  applyTax();
}

Note: I added toFixed(2) to include the "cents" placeholders, even when their value is zero.

Using the following HTML:

<div class="main">
  <h1>Cart</h1>
  <p>Cart Subtotal: $<span id="cartSubtotal">100.00</span></p>
  <p>Sales Tax GST: $<span id="taxGst"></span></p>
  <p>Sales Tax PST: $<span id="taxPst"></span></p>
  <p>Final Total: $<span id="cartTotal"></span></p>
</div>

Would display something that looked like this:

Cart

Cart Subtotal: $100.00
Sales Tax GST: $5.00
Sales Tax PST: $9.97
Final Total: $114.97

Save that you're already inserting the price as a floating-point number into the item with the id cartSubtotal

Maybe a CodePen example to play with? http://codepen.io/scrapcode/pen/GgYXaQ

Upvotes: 1

Related Questions