How to multiply two text fields using javascript and output the result into another text field

Question

I am using this code

   <script type="text/javascript">
    $(function() {
        $("#addAll2").click(function() {
            var add = 0;
            $("#discount") = $dis
            $(".amt2").each(function() {
                add += document.getElementById('subtotal').value * document.getElementById('discount').value / 100;
            });
            $("#discountamt").val(add.toFixed(2));
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $("#addAll").click(function() {
            var add = 0;
            $(".amt").each(function() {
                add += Number($(this).val());
            });
            $("#subtotal").val(add.toFixed(2));
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $("#addAll3").click(function() {
            var add = 0;
            $(".amt3").each(function() {
                add += Number($(this).val());
            });
            $("#sum").val(add.toFixed(2));
        });
    });
</script>

Along with these fields:

    <fieldset>
  <legend>Items</legend>
  <table>
    <thead>
      <tr>
        <th scope="col" width="100px">ALU</th>
        <th scope="col" width="400px">Item Name</th>
        <th scope="col" width="100px">Item Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input name="alu1" id="alu1" type="text" size="15" /></td>
        <td><input name="itemname1" id="itemname1" type="text" size="75" /></td>
        <td>$
          <input name="price1" id="price1" class="currency amt amt1" type="text" size="14" value="0.00" /></td>
      </tr>
    </tbody>
  </table>
  <button>Add Row</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
  <script>
    $(document).ready(function($)
    {
        // trigger event when button is clicked
        $("button").click(function()
        {
            // add new row to table using addTableRow function
            addTableRow($("table"));
            // prevent button redirecting to new page
            return false;
        });

        // function to add a new row to a table by cloning the last row and 
        // incrementing the name and id values by 1 to make them unique
        function addTableRow(table)
        {
            // clone the last row in the table
            var $tr = $(table).find("tbody tr:last").clone();
            // get the name attribute for the input and select fields
            $tr.find("input,select").attr("name", function()
            {
                // break the field name and it's number into two parts
                var parts = this.id.match(/(\D+)(\d+)$/);
                // create a unique name for the new field by incrementing
                // the number for the previous field by 1
                return parts[1] + ++parts[2];
            // repeat for id attributes
            }).attr("id", function(){
                var parts = this.id.match(/(\D+)(\d+)$/);
                return parts[1] + ++parts[2];
            });
            // append the new row to the table
            $(table).find("tbody tr:last").after($tr);
        };
    });
    </script>
 <div class="fieldline" style="text-align:right;">
   <input id="addAll" type="button" value="Calculate Subtotal" />
    <label>Subtotal: $
    <input size="18" name="subtotal" id="subtotal" class="amt2 amt3" type="text" value="0.00" />
    </label>
    </div>
    <div class="fieldline" style="text-align:right;">
    <label>Discount:
    <input size="18" name="discount" id="discount" type="text" value="00" />%
    </label>
    </div>
    <div class="fieldline" style="text-align:right;">
    <input id="addAll2" type="button" value="Calculate Discount" />
    <label>Discount Amount: $
    <input size="18" name="discountamt" id="discountamt" class="amt3" type="text" value="0.00" />
    </label>
    </div>
  <div class="fieldline" style="text-align:right;">
    <label>Shipping Method:
      <select name="shipmeth" id="shipmeth" onchange="MM_jumpMenu('parent',this,0)">
        <option></option>
        <option value="freeups">FREE UPS Ground</option>
        <option value="upsground">UPS Ground</option>
        <option value="ups2">UPS 2nd Day</option>
        <option value="ups3">UPS 3rd Day</option>
        <option value="ups1">UPS Next Day Air</option>
        <option value="upscanada">UPS Canada</option>
        <option value="uspsint">USPS International</option>
        <option value="dhlint">DHL International</option>
        <option value="freeship">Free Shipping Override</option>
      </select>
    </label>
  </div>
  <div class="fieldline" style="text-align:right;">
    <label>Shipping Cost: $
      <input size="18" name="shipcost" id="shipcost" class="amt3" type="text" value="0.00" />
    </label>
  </div>
  <div class="fieldline" style="text-align:right;">
    <input id="addAll1" type="button" value="Calculate CA TAX" />
    <label>Sales Tax: $
      <input name="salestax" type="text" id="salestax" class="amt3" size="18" value="0.00" />
    </label>
  </div>
  <div class="fieldline" style="text-align:right;">
    <input id="addAll" type="button" value="Calculate Total" />
    <label>Total:
      <input size="18" required="required" name="sum" id="sum" type="text" value="0.00" />
    </label>
  </div>
</fieldset>

I have it so it calulates the Subtotal and puts it in. But when I try to allow it to take the Discount field and multiply by it then divide by 100 the output the result in the Discount Ammount field. It doesn't seem to work. I have tried different variations as well.

I should be able to have it calculate the rest into the Total field if I can get discounts working.

Thanks!!!!

Answer 1

The line

$("#discount") = $dis

doesn't look right to me - try removing it. I commented it out in this JSFiddle and it seems to do what you want.