Trying to calculate price based on height / width entered by customer

Highlighted
Shopify Partner
4 0 0

Hi,
Im trying to calculate the price of an item, based off what numbers the customer types in for Height and Width.

I was trying to follow a tutorial I found here: http://javascript-coder.com/javascript-form/javascript-calculator-script.phtml but Im stuck.

Heres the code I currently have, I was hoping someone could help get me back on track.

Thanks

 

        
<form action="product__form" id="customsize">      
        
  <fieldset>
    <legend>Enter Custom Size in Inches</legend>

    <label for="height">Height:</label>
    <input type="number" id="height" name="height"
           placeholder="Height" step="1" style="width: 100px; height: 30px; padding: 0 0 0 4px;" min="8" max="700"
           onchange="calculateTotal()"/>
    <span class="validity"></span>

    <label for="width">Width:</label>
    <input type="number" id="width" name="width"
           placeholder="Width" step="1" style="width: 100px; height: 30px; padding: 0 0 0 4px;" min="8" max="700"
           onchange="calculateTotal()"/>
    <span class="validity"></span>
        
    <div id="totalPrice"></div>

  </fieldset>
  
</form>
        
<script>   

 var theForm = document.forms["customsize"];
 
  function getheight()
{
    //Assume form with id="theform"
    var theForm = document.forms["customsize"];
    //Get a reference to the TextBox
    var height = theForm.elements["height"];
    var customheight =0;
    //If the textbox is not blank
    if(height.value!="")
    {
        customheight = parseInt(height.value);
    }
return customheight;
}
  
    function getwidth()
{
    //Assume form with id="theform"
    var theForm = document.forms["customsize"];
    //Get a reference to the TextBox
    var width = theForm.elements["width"];
    var customwidth =0;
    //If the textbox is not blank
    if(width.value!="")
    {
        customwidth = parseInt(width.value);
    }
return customwidth;
}

  
  
    
function getTotal()
{
    //Here we get the total price by calling our function
    //Each function returns a number so by calling them we add the values they return together
    var Price = "getheight()" x "getwidth()";
 
    //display the result
    document.getElementById('totalPrice').innerHTML =
                                      "Price $"+ Price;
 
}


        </script>
        

I just posted this in the design section, but feel this is probably a better place for it.  I tried deleting the other post but couldnt figure it out. 

0 Likes