Set textbox to zero when other textbox is empty or user input zero

Question

I have here a table that automatically compute the total cost base on the quantity you entered.

My problem is every time I try to remove the value in quantity the total cost value from the previous quantity is still there instead of "0". I just want it to response like this :

If the quantity textbox has a value total cost will compute and

if the user remove the value in quantity the total cost will display "0".

Any help would be much appreciated! Thank you.

Here's what I have so far.

HTML

<table style="border:1px solid purple">
    <tr>
    <th style="font-size:9px;">COST</th>
    <th style="font-size:9px;">QTY</th>
    <th style="font-size:9px;">TOTAL</th>
    </tr>

    <tr id="Tr1">

    <td><input class="price" type="text" name="price[]" value="100.00"></td>
    <td><input class="qty" type="text" name="qty[]" ></td>
    <td><input type="text" class="output" name="output[]"></td>
    </tr>
    <tr id="Tr2">
    <td><input class="price" type="text" name="price[]" value="100.00"></td>
    <td><input class="qty" type="text" name="qty[]" ></td>
    <td><input type="text" class="output" name="output[]"></td>
    </tr>
    <tr id="Tr3">
   <td><input class="price" type="text" name="price[]" value="100.00"></td>
    <td><input class="qty" type="text" name="qty[]" ></td>
    <td><input type="text" class="output" name="output[]"></td>
    </tr>
    <tr id="Tr4">
   <td><input class="price" type="text" name="price[]" value="100.00"></td>
    <td><input class="qty" type="text" name="qty[]" ></td>
    <td><input type="text" class="output" name="output[]"></td>
    </tr>
</table>

JavaScript

$(document).ready(function() {
    $(this).keyup(function() {
        var grandTotal = 0;
        $("input[name='price[]']").each(function (index) {
            var price = $("input[name='price[]']").eq(index).val();
            var qty = $("input[name='qty[]']").eq(index).val();
            var output = parseInt(price) * parseInt(qty);

            if (!isNaN(output)) {
                $("input[name='output[]']").eq(index).val(output);
            }
        });
    });
});

Sample here : https://jsfiddle.net/bqwnw9Lk/1/

score 0 · Answer 1 · answered Nov 10 '16 at 04:21

0

modified jsvascript is below, try this..

    $(document).ready(function() {
    $(this).keyup(function() {
        var grandTotal = 0;
        $("input[name='price[]']").each(function (index) {
            var price = $("input[name='price[]']").eq(index).val();
            var qty = $("input[name='qty[]']").eq(index).val();

            if( qty == ""){
            output = 0;
            }
            else{
                var output = parseInt(price) * parseInt(qty);
            }


            if (!isNaN(output)) {

              $("input[name='output[]']").eq(index).val(output);


            }
        });
    });
});

If u want to keep the output field empty for empty quantity field then You can set
output= "" instead of output =0;

answered Nov 10 '16 at 04:21

Shambhu Kumar

26
4

Hi another question what if I put 10.75 how can I display the decimal on the total cost textbox? – x'tian Nov 10 '16 at 05:33
use parseFloat() instead of parseInt(), i.e. – Shambhu Kumar Nov 10 '16 at 06:51
I used var output = parseFloat(price) * parseFloat(qty); The output is still in not decimal. I tried to input 100.00 * 10.25 then the ouput is 1025. – x'tian Nov 10 '16 at 07:14
if you want to display at least two decimal places in all the cases then refer this link: http://stackoverflow.com/questions/20473940/always-display-at-least-two-decimal-places – Shambhu Kumar Nov 10 '16 at 07:27

Set textbox to zero when other textbox is empty or user input zero

1 Answers1