CODEWITHSUNDEEP
javascript
user3791885
user3791885

Reputation: 19

total amount is getting displayed as NAN,javascript

I have a form in which i have two sets of radio buttons and one textbox to enter the quantity value. Based on the radio button selected and value in quantity textbox the total textbox should get populated with values. I am using array to do the calculation but the value in total fields is displayed as NAN. Can anyone check my code and let me know where i am wrong??

**HTML**

<form id="orderform" name="orderform" >
                    <fieldset data-role="controlgroup">
                         <legend><b>Choice</b></legend>
                         <input type="radio" name="choice" id="veg" value="1" checked onclick="total()">
                         <label for="veg">Vegetarian</label>
                         <input type="radio" name="choice" id="nonveg" value="2" onclick="total()">
                         <label for="nonveg">Meat Lover</label>
                     </fieldset>
                    <fieldset data-role="controlgroup">
                        <legend><b>Size</b></legend>
                        <input type="radio" name="size" id="small" onclick="total()">
                        <label for="small">Small</label>
                        <input type="radio" name="size" id="medium" onclick="total()">
                        <label for="medium">Medium</label>
                        <input type="radio" name="size" id="large" onclick="total()">
                        <label for="large">Large</label><span class="validation"></span>
                    </fieldset>
                            <div><b>Quantity</b>
                        <input type="text" id ="qty" name="qty" size="5" onclick="total()">
                    </div><div>
                        <b>Total</b>
                        <input type="text" id="amt" name="amt" readonly="readonly"> 
                    </div>

Javascript Javascript

var array=[[8.99,9.99,10.99],[9.99,10.99,11.99]];

    function total()
    {
        var row = document.querySelector('input[name="choice"]:checked').value;
       var column = document.querySelector('input[name="size"]:checked').value;
        var qty=document.getElementById("qty").value;
        var total=0;  
            total= (array[row][column]+1)*qty;
       document.orderform.amt.value = total;
    }

Upvotes: 0

Views: 362

Answers (2)

Ramesh Boddepalli
Ramesh Boddepalli

Reputation: 301

You have to change size group in html like below

         <legend><b>Size</b></legend>
         <input type="radio" name="size" id="small" value="1" onclick="total()">
         <label for="small">Small</label>
         <input type="radio" name="size" id="medium" value="2" onclick="total()">
         <label for="medium">Medium</label>
         <input type="radio" name="size" id="large" value="3" onclick="total()">
         <label for="large">Large</label><span class="validation"></span>

it will work for you

Upvotes: 1

worldask
worldask

Reputation: 1837

var column = document.querySelector('input[name="size"]:checked').value;

you can alert(column), you'll find that value is "on". because you didn't setup any value in all of your size group

Upvotes: 0

Related Questions