how to do on select option exclude values or include values

Question

how to change values dynamically, when i enter or erase the "ship" values and how to do include tax 13% and exclude tax on select option with grand total. here is my code: Jsfifddle

<script>
(function() {
 "use strict";

$("table").on("change", "input", function() {
var row = $(this).closest("tr");
var qty = parseFloat(row.find(".quantity").val());
var price = parseFloat(row.find(".productprice").val());
var tcost = qty * price;
row.find(".tcost").val(isNaN(tcost) ? "" : tcost);

 var totalValue = 0;
 $(document).find(".tcost").each(function(){
totalValue += parseFloat($(this).val());
 });
 var tax = totalValue * 13/100;
 $("#tax").val(tax);

 totalValue = totalValue + tax;

 var ship = $('#ship').val();
 totalValue = parseFloat(totalValue) + parseFloat(ship);


 $("#total").val(totalValue);
});

})();   
</script>

Answer 1

I don't mean to offend, but your code needs help. First, let me walk you through some fixes to your HTML.

<tr for="input01"> is wrong. <tr> doesn't have a for attribute. You also need to space out your attributes for valid HTML.

Your line <input type='text' class="tax" id="tax" name="tax" placeholder="Tax amount" class="price" disabled/> has two class attributes.

Now, for the fixes. Basically the reason why your code was failing was two-fold:

• Number vs. ParseFloat: The Number datatype conversion function in javascript is handled slightly differently than parseFloat, specifically when it comes to empty strings. Number will turn '' into 0 whereas parseFloat will turn it into NaN.

• Scope: Your row.find(class) method didn't extend to the tax and shipping fields because those were not part of the table. Moreover, your event handler was only for <table>, but the shipping and tax calculators were out of table, in body or even document. As a result, when you tried to access the .val() method on row.find('.shipping'), you got NaN.

  Further on this point, your second argument for the event handler was input, with no provision for select's change event.

I've fixed your code with a jsFiddle where I address these issues and fix your HTML as well. In case the link becomes inaccessible, I've included the code below.

HTML

<table class="table table-bordered inventory" style="width:95%;float:right;">
    <thead>
        <tr>
            <th>
                <input class='check_all' type='checkbox' onclick="select_all()" />
            </th>
            <th>S. No</th>
            <th>Product Name</th>
            <th>Item Code</th>
            <th>Quantity</th>
            <th>Price per Quantity</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type='checkbox' class='case' />
            </td>
            <td><span id='snum'>1.</span>

            </td>
            <td>
                <input type='text' id='productname_1' name='productname[]' required />
            </td>
            <td>
                <input type='text' id='itemcode_1' name='itemcode[]' required />
            </td>
            <td>
                <input type='text' class="number quantity" id='quantity_1' name='quantity[]' style="width:165px;" required />
            </td>
            <td>
                <input type='text' class="number productprice" id='productprice_1' name='productprice[]' style="width:165px;" required />
            </td>
            <td>
                <input type='text' class="number tcost" id='tcost_1' name='tcost[]' style="width:165px;" />
            </td>
        </tr>
    </tbody>
</table>
<div class="" style="width:280px; float:right;">
    <br>
    <label>Tax Type
        <select class="number" style="margin-left: 8px;" id="taxoptions" required>
            <option value="">Select Tax Type</option>
            <option value="excludetax">Exclude Tax</option>
            <option value="Includetax">Include Tax</option>
        </select>
    </label>
    <br>
    <label style="margin-left: 33px;">13%
        <input type='text' class="tax" id="tax" name="tax" placeholder="Tax amount" disabled />
        <br>
        <br>
    </label>
    <input type='text' id='ship' name='ship' placeholder="shipping amount" class="ship" style="margin-left: 51px;" />
    <br>
    <br>
    <input type='text' id='total' name='total' placeholder="Total amount" class="total" style="margin-left: 60px;" />
    <br>
    <br>
    <label class="checkbox inline" style="margin-left: 60px;">
        <input id="inlineCheckbox1" type="checkbox" value="sendemail">Send E-mail</label>
    <br>
    <br>    <span>
                                                    <input type="submit" value="submit" name="submit" class='btn btn-success' style="width:100px; margin-left: 54px;" />
                                                    <button type="button" class='btn btn-success' style="width:100px; margin-left: 22px;">Print</button>
                                                </span>

</div>

Javascript

 (function () {

     $(document).on("change", "input, select", function (e) {
         var row = $(this).closest("tr");
         var qty = Number(row.find(".quantity").val());
         var price = Number(row.find(".productprice").val());
         var ship = Number($("#ship").val());
         var tcost = 0;
         tcost = qty * price;
         var totalValue = 0;
         var taxAmount = 0;

         row.find(".tcost").val(isNaN(tcost) ? "" : tcost);
         totalValue += Number($("#tcost_1").val());
         console.log(row.find(".tcost").val());

         if ($('#taxoptions').val() != 'Includetax') {
             taxAmount = 0;
             $('#tax').val(taxAmount);
         } else {
             taxAmount = totalValue * .13;
             $('#tax').val(taxAmount);
         }


         totalValue += Number(taxAmount + ship);

         $('#total').val(totalValue);

     });

 })();