title: Add input from a form to a table in the same page without reloading
body: <p>Im trying to make the input from the user in a html form be added to a table that adds up the total price of all the products  in the same page all of this without reloading.</p>
  
  <p>here is my html form and table code</p>
  
  <p>Thank you in advance</p>
  
  <pre><code>&lt;h1&gt;Instructions&lt;/h1&gt;
  
  &lt;section&gt;
      &lt;p&gt;Please enter the desired product/services in the following table to create an order.&lt;/p&gt;
      &lt;section style="width:300px; margin-left:20px"&gt;
          &lt;form action="" name="order" method="POST" autocomplete="off"&gt;
              &lt;table width="300" border="0" cellspacing="5" cellpadding="2"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;label for="product"&gt;Product:&lt;/label&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input name="product" id="product" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" placeholder="Product name" size="28" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;label for="quantity"&gt;Quantity:&lt;/label&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input name="quantity" id="quantity" required type="number" title="Enter item quantity" placeholder="Product quantity" width="196px" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;label for="price"&gt;Price:&lt;/label&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input name="price" id="price" required pattern="[0-9]" title="Please enter only numeric characters" placeholder="Product price" size="28" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;br&gt;
              &lt;div id="buttons"&gt;
                  &lt;input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset"&gt;
                  &lt;input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!" onclick=""&gt;
                  &lt;br style="clear:both;"&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/section&gt;
  &lt;/section&gt;
  &lt;table width="416" border="0" cellspacing="5" cellpadding="2"&gt;
      &lt;tr&gt;
          &lt;th width="115" scope="col"&gt;Products&lt;/th&gt;
          &lt;th width="112" scope="col"&gt;Quantity&lt;/th&gt;
          &lt;th width="92" scope="col"&gt;Price&lt;/th&gt;
          &lt;th width="56"&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td scope="col"&gt;&amp;nbsp;&lt;/th&gt;
              &lt;td scope="col"&gt;
                  &lt;/th&gt;
                  &lt;td scope="col"&gt;&amp;nbsp;&lt;/th&gt;
                      &lt;th&gt;Total&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>