0

I've created a dynamic HTML table where the sales man is ordering the customer order. This function is called on the click event of the Add Item Button.

var globalTID;  // clear this global variable upon sale button. 
            function loadAddedData() {
                $("#cart-table td").remove();
                //var tid = $("#token").val();
                alert("this is global Token ID :" + globalTID);
                //alert(v1);
                $.ajax({
                    url: "show-added-token.php",
                    data: {tokenID: globalTID},
                    type: "POST",
                    dataType: "JSON",
                    success: function(data) {
                        
                        $.each(data, function(key, value) {
                            //$("#showme").append(value.item_id + "<br>" + value.item_unit_price + "<br" + value.order_qty);                        
                            $("#cart-table").append('<tr><td>' + value.item_name + '</td>' + '<td>' + value.item_unit_price + '</td>' + '<td>' + value.order_qty + '</td>' + '<td class="op">' + value.order_price + '</td>' + '<td>' + value.order_of + '</td>' + '<td>' + value.order_instructions + '</td>' + '<td>' + value.token_id + '</td>' + '<td>' + "<button class='btn-edit' data-eid=" + [value.cart_id] + ">Edit</button>" + '</td>' + '<td>' + "<button class='btn-delete' data-did=" + [value.cart_id] + ">Delete</button>" + '</td></tr>');
                            console.log(data);
                        });
                    }
                });
            };

What I want is to calculate the each order price upon the click event of the Calculate button. Here the .op is the class name which i applied on the of the order_price. I've seen different scenarios here at STACK but not fully understanding them.

var price = 0;
                $('#cart-table tr').each(function() {
                    var tp = $(this).find(".op").text();                          
                    price = price + parseInt(tp);
                    /*if(jQuery.type(price) === "number"){
                        alert('its number');
                    }else{
                        alert('error');
                    }*/
                });

                console.log("total price is : " + price);
                $("#tp").val(price);

But its showing NaN in the textbox (tp). Then I tried another one from the STACK and it also did not bring the desired output.

    var tp = $(".op").text();
   price += parseFloat(tp);
   alert(price + "<br>");
   $("#tp").val(price);
user87
  • 27
  • 5
  • You should try console logging `tp` and see what it is-- whatever it is, it is not parsing properly when passed to `parseFloat`. If I had to guess I'd say that it is a string of a number that _includes_ the currency symbol (for instance, `"$12.34"`) which `parseFloat` will evaluate to `NaN`. – Alexander Nied Jun 02 '21 at 02:02
  • Thank you Alexander. It is basically total_Price. Which I want to sum up and show the final total price in the textbox (#tp). I've already displayed it in console but its also showing NaN. I tried even parseInt but same NaN result. – user87 Jun 02 '21 at 03:32
  • 1
    Hi, check [this](https://jsfiddle.net/kzm0xjc9/) working code . – Swati Jun 02 '21 at 04:20
  • Can you insert `tp= tp.replace(/\D/g,'');` before `price += parseFloat(tp)` ? ( https://stackoverflow.com/questions/1862130/strip-all-non-numeric-characters-from-string-in-javascript ) – Ichinator Jun 02 '21 at 08:27
  • @Swati, it worked here. Thank you. But I've a question. You've used an inline if condition `price += (tp != "" && $.isNumeric(tp)) ? parseInt(tp) : 0` that if the tp value is not null and it must be numberic. If its true then parse it, otherwise put it as 0. IF I use this `price += parseInt(tp);` Then why its not working? Though its also parsing the tp? Thanks – user87 Jun 02 '21 at 15:56
  • because if value is `""` it will not parse and will give you `NaN` error . So , before parsing check if its not empty and numeric. – Swati Jun 02 '21 at 16:06
  • Yes, but it wasn't empty? Was it? I truly want to learn it. It feels very exciting when learn something new. And at my stage where I'm absolutely new to web dev, it feels too good. So I want to learn that why it didn't work with me? Thanks – user87 Jun 02 '21 at 16:16

0 Answers0