title: how to do a jquery glass calculator
body: <p>I am getting ready to star dealing with a jquery price calculator for glasses. One box is going to have width, another box height, a dropdown is going to have type of glass. 
  Another box quantity
  I have to calculate the price of the glass.
  I have the calculator working, my question is the following, how can I update the .showResults class? this is the place where I will show the results but I would this to be updated as soon as the user selects a dropdown, then puts width or height? can this be done?</p>
  
  <p>Thank you :)
  here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
   
  $("#calculate").click(function(){
   
   var typeOfGlass=$("select#typeOfGlass option:selected").val();
   var glassWidth = $("#glassWidth").val();
   var glassHeight = $("#glassHeight").val();
   var quantity = $("#quantity").val();
   if(!(quantity) || quantity == ''){
    alert("Quantity cannot be 0, please correct"); 
   }
   var sqrFt = typeOfGlass/144;
   var price = 2;
   if(glassWidth&lt;10 || glassHeight&lt;10){
    var totalPrice = 10 * quantity; 
   }else{
   var totalPrice = glassWidth * glassHeight * sqrFt * quantity;
   }
   $(".showResults").empty();
      $(".showResults").append("&lt;p&gt;The total price is: $" +totalPrice.toFixed(2));
  });
  })
  &lt;/script&gt;
  
  &lt;form id="form1" name="form1" method="post"&gt;
   &lt;select id="typeOfGlass"&gt;
     &lt;option value="15"&gt;Standard/Annealed Glass&lt;/option&gt;
       &lt;option value="20"&gt;Tempered Glass&lt;/option&gt;
      &lt;/select&gt;&lt;br&gt;
  
   Glass Width:&lt;input type="text" id="glassWidth"&gt;&lt;br&gt;
  
      Glass height:&lt;input type="text" id="glassHeight"&gt;&lt;br&gt;
  
      Quantity:&lt;input type="text" id="quantity"&gt;&lt;br&gt;
  
    &lt;input type="button" name="calculate" id="calculate" value="Calculate"&gt;&lt;input type="reset" value="Clear" /&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>