Why would the dynamic value won’t print in this form?

I’m trying to paste a dynamic value on a readonly input html form field. I have a script that calculates the total of the shopping cart and I’m trying to get the grand total appear in a readonly field so it can be sent with the rest of the form. Unfortunately, the grand total returns 0.0 when I use an input form field instead of a div. Any idea?

Example Below.

The Tax Calculation Script:

<script>
    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);
  var elements = document.getElementsByClassName( 'cartTotal' );

for(var i = 0; i < elements.length; i++) {
    elements[i].innerHTML = totalAmount.toFixed(2);

}}

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

</script>

The form:

<div id="payment_container">
                <div class="checkout_table_left">Subtotal</div><div class="checkout_table_right" id="cartSubtotal">${cart.subtotal}</div>

                <div class="checkout_table_left" >Gst&nbsp;<a class='tooltip' href='#'><small style="background-color: rgb(233, 233, 233);">?</small><span><fmt:message key='GstInfo'/> </span></a></div>

                <div id="taxPst" class="checkout_table_right"></div>

                <div class="checkout_table_left">Pst&nbsp<a class='tooltip' href='#'><small style="background-color: rgb(233, 233, 233);">?</small><span><fmt:message key='PstInfo'/>  </span></a></div>
                <div id="taxGst" class="checkout_table_right"></div>

                <div class="checkout_table_left">Shipping</div><div class="checkout_table_right">Free</div>



                <form  class="checkout_form"  method="post" action="purchase" name="checkout">

                    <div class="checkout_table_left">Grand Total</div>
                    <input class="cartTotal checkout_table_right" readonly type="text" value="${cart.total}"></input>
</form>


Source: forms

Leave a Reply