Jump to content

while calculating total NAN error showing

ksumanth

By ksumanth
in Javascript Help

 Share

Recommended Posts

ksumanth Member

ksumanth

Posted
Posted

Hello Everyone,

 

I created a form and in that i have "Multiple Checkboxes" and "Dropdown list ". If i click check boxes the value should add "Indual textbox+Total Textbox".

2. I have one more option select No of pages if i select dropdown No of pages , It should display "Indual textboxprice+Checkboxselectprice".

 

I did all the calculations but the total value is displaying NAN if i click on checkboxes

 

Here is my code can any one fix this

<html>
    <head>
        <script type="text/javascript">
        function updateTotal(){
        var date0 = document.getElementById('date0');
        var date1 = document.getElementById('date1');
        var date2 = document.getElementById('date2');
        var amount = 0;    
        amount += date0.checked ? parseFloat(date0.getAttribute('data-price')) : 0;
        amount += date1.checked ? parseFloat(date1.getAttribute('data-price')) : 0;
        amount += date2.checked ? parseFloat(date2.getAttribute('data-price')) : 0;
        document.getElementById('total').value = amount;
        
      var pagesprice=document.getElementById('totalpages').value;
               document.getElementById('pagesprice').value=pagesprice;                
               
                var domainprice=document.getElementById('totalprice');
            domainprice.value =amount+parseInt(pagesprice);
             
    }
    </script>
    </head>
    
        <body>
            <table>
            <tr>
<td id="datecontainer" onchange="Process(this.options[this.selectedIndex].value)">
   <input id="date0" type="checkbox" name="form[date]" value="blue" data-price="10" onChange="updateTotal();">product 1(10)<br />
   <input id="date1" type="checkbox" name="form[date]" value="green" data-price="30" onChange="updateTotal();">product 2(30)<br />
   <input id="date2" type="checkbox" name="form[date]" value="red" data-price="50" onChange="updateTotal();">product 3(50)<br />
 </td>
<tr><td>Total cost Product:
  <input name="total" id="total" type="text">
 </td></tr>
 
 <tr><td>Pages Price
     <select  id="totalpages" style="width:205px" onchange="updateTotal()">
          <option value="">Select Pages</option>
          <option value="5">5 Pages</option>
          <option value="10">10 Pages</option>
          <option value="15">15 Pages</option>
          <option value="25">25 Pages</option>
          <option value="30">30 Pages</option>
          <option value="100">More than 35 Pages</option>                                
    </select>
 </td></tr>
     <tr><td>Total cost Pages:
      <input name="pagesprice" id="pagesprice" type="text">
     </td></tr>
     <tr><td>Total Pagesprice+Total cost Product
          <input name="totalprice" id="totalprice" type="text">
     </td></tr>
 </table>
</body>
    
</html>

Link to comment
Share on other sites
ksumanth Member

ksumanth

Posted
  • Author
Posted

Hello Everyone,

 

I created a form and in that i have "Multiple Checkboxes" and "Dropdown list ". If i click check boxes the value should add "Indual textbox+Total Textbox".

2. I have one more option select No of pages if i select dropdown No of pages , It should display "Indual textboxprice+Checkboxselectprice".

 

I did all the calculations but the total value is displaying NAN if i click on checkboxes

 

Here is my code can any one fix this

<html>
    <head>
        <script type="text/javascript">
        function updateTotal(){
        var date0 = document.getElementById('date0');
        var date1 = document.getElementById('date1');
        var date2 = document.getElementById('date2');
        var amount = 0;    
        amount += date0.checked ? parseFloat(date0.getAttribute('data-price')) : 0;
        amount += date1.checked ? parseFloat(date1.getAttribute('data-price')) : 0;
        amount += date2.checked ? parseFloat(date2.getAttribute('data-price')) : 0;
        document.getElementById('total').value = amount;
        
      var pagesprice=document.getElementById('totalpages').value;
               document.getElementById('pagesprice').value=pagesprice;                
               
                var domainprice=document.getElementById('totalprice');
            domainprice.value =amount+parseFloat(pagesprice);
             
    }
    </script>
    </head>
    
        <body>
            <table>
            <tr>
<td id="datecontainer" onchange="Process(this.options[this.selectedIndex].value)">
   <input id="date0" type="checkbox" name="form[date]" value="blue" data-price="10" onChange="updateTotal();">product 1(10)<br />
   <input id="date1" type="checkbox" name="form[date]" value="green" data-price="30" onChange="updateTotal();">product 2(30)<br />
   <input id="date2" type="checkbox" name="form[date]" value="red" data-price="50" onChange="updateTotal();">product 3(50)<br />
 </td>
<tr><td>Total cost Product:
  <input name="total" id="total" type="text">
 </td></tr>
 
 <tr><td>Pages Price
     <select  id="totalpages" style="width:205px" onchange="updateTotal()">
          <option value="">Select Pages</option>
          <option value="5">5 Pages</option>
          <option value="10">10 Pages</option>
          <option value="15">15 Pages</option>
          <option value="25">25 Pages</option>
          <option value="30">30 Pages</option>
          <option value="100">More than 35 Pages</option>                                
    </select>
 </td></tr>
     <tr><td>Total cost Pages:
      <input name="pagesprice" id="pagesprice" type="text">
     </td></tr>
     <tr><td>Total Pagesprice+Total cost Product
          <input name="totalprice" id="totalprice" type="text">
     </td></tr>
 </table>
</body>
    
</html>

Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted

Basically, you just need to give the option "Select Pages" a value of 0 to correct that error (or add more code to the function to handle that scenario). Anyway, this is a bit cleaner

 

 

<html>
  <head>
    <script type="text/javascript">
    function updateTotal()
    {
      var date0 = document.getElementById('date0');
      var date1 = document.getElementById('date1');
      var date2 = document.getElementById('date2');

      var amount = 0;
      amount += date0.checked ? parseFloat(date0.getAttribute('data-price')) : 0;
      amount += date1.checked ? parseFloat(date1.getAttribute('data-price')) : 0;
      amount += date2.checked ? parseFloat(date2.getAttribute('data-price')) : 0;

      var totalpages  = parseInt(document.getElementById('totalpages').value);

      document.getElementById('total').value = amount;
      document.getElementById('pagesprice').value = totalpages;
      document.getElementById('totalprice').value = amount + totalpages;
    }
    </script>
    </head>

<body>
<table>
  <tr>
    <td id="datecontainer" onchange="Process(this.options[this.selectedIndex].value)">
      <input id="date0" type="checkbox" name="form[date]" value="blue" data-price="10" onChange="updateTotal();" />product 1(10)<br />
      <input id="date1" type="checkbox" name="form[date]" value="green" data-price="30" onChange="updateTotal();" />product 2(30)<br />
      <input id="date2" type="checkbox" name="form[date]" value="red" data-price="50" onChange="updateTotal();" />product 3(50)<br />
    </td>
  <tr>
    <td>
      Total cost Product:
      <input name="total" id="total" type="text" readonly="readonly" />
    </td>
  </tr>
  <tr>
    <td>
      Pages Price
      <select  id="totalpages" style="width:205px" onchange="updateTotal()">
        <option value="0">Select Pages</option>
        <option value="5">5 Pages</option>
        <option value="10">10 Pages</option>
        <option value="15">15 Pages</option>
        <option value="25">25 Pages</option>
        <option value="30">30 Pages</option>
        <option value="100">More than 35 Pages</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      Total cost Pages:
      <input name="pagesprice" id="pagesprice" type="text" readonly="readonly" />
    </td>
  </tr>
  <tr>
    <td>
      Total Pagesprice+Total cost Product
      <input name="totalprice" id="totalprice" type="text" readonly="readonly" />
    </td>
  </tr>
 </table>
</body>

</html>
Link to comment
Share on other sites
ksumanth Member

ksumanth

Posted
  • Author
Posted (edited)

Thank You I got this but even i have one more option called radiobutton and if i click radiobutton it is accepting only first value. I mean value display in textbox and totalsum calculation is taking default value here is my code can you fix this

<html>
  <head>
    <script type="text/javascript">
    function updateTotal()
    {
      var date0 = document.getElementById('date0');
      var date1 = document.getElementById('date1');
      var date2 = document.getElementById('date2');

      var amount = 0;
      amount += date0.checked ? parseFloat(date0.getAttribute('data-price')) : 0;
      amount += date1.checked ? parseFloat(date1.getAttribute('data-price')) : 0;
      amount += date2.checked ? parseFloat(date2.getAttribute('data-price')) : 0;

      var totalpages  = parseInt(document.getElementById('totalpages').value);
      
      var packages = parseInt(document.getElementById('packages').value);

      document.getElementById('total').value = amount;
      document.getElementById('pagesprice').value = totalpages;
      document.getElementById('packagecost').value = packages;
      document.getElementById('totalprice').value = amount + totalpages + packages;
    }
    </script>
    </head>

<body>
<table>
  <tr>
    <td id="datecontainer" onchange="Process(this.options[this.selectedIndex].value)">
      <input id="date0" type="checkbox" name="form[date]" value="blue" data-price="10" onChange="updateTotal();" />product 1(10)<br />
      <input id="date1" type="checkbox" name="form[date]" value="green" data-price="30" onChange="updateTotal();" />product 2(30)<br />
      <input id="date2" type="checkbox" name="form[date]" value="red" data-price="50" onChange="updateTotal();" />product 3(50)<br />
    </td>
  <tr>
    <td>
      Total cost Product:
      <input name="total" id="total" type="text" readonly="readonly" />
    </td>
  </tr>
  <tr>
    <td>
      Pages Price
      <select  id="totalpages" style="width:205px" onchange="updateTotal()">
        <option value="0">Select Pages</option>
        <option value="5">5 Pages</option>
        <option value="10">10 Pages</option>
        <option value="15">15 Pages</option>
        <option value="25">25 Pages</option>
        <option value="30">30 Pages</option>
        <option value="100">More than 35 Pages</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      Total cost Pages:
      <input name="pagesprice" id="pagesprice" type="text" readonly="readonly" />
    </td>
  </tr>
  <tr>
  	<td>Package
  		<input type="radio" name="packages" id="packages" value="100" onclick="updateTotal();" />50MB
  		<input type="radio" name="packages" id="packages" value="200" onclick="updateTotal();" />100MB
  		<input type="radio" name="packages" id="packages" value="300" onclick="updateTotal();" />200MB
  	</td>
  </tr>
  <tr>
  	<td>
  		 Total Package Cost:
      <input name="packagecost" id="packagecost" type="text" readonly="readonly" />
  	</td>
  </tr>
  <tr>
    <td>
      Total Pagesprice+Total cost Product+Total Package Cost
      <input name="totalprice" id="totalprice" type="text" readonly="readonly" />
    </td>    
  </tr>
  
 </table>
</body>

</html>
Edited by ksumanth
Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted (edited)

Radio buttons are a bit tricky. There is no way to directly get the value of the selected radio button option. You have to check to see which one is checked and then get the value of that option. So, right now you are getting the first value in the radio group - regardless which one is checked (or not checked). I have a function I built to do just that. Plus, you cannot have multiple elements on a page with the same ID! You will need to reference the radio group by Name.

 

I fixed some other things as well

 

<html>
  <head>
    <script type="text/javascript">

    function radioGroupValue(groupObj)
    {
      if (!groupObj.length)
      {
        //Only one option in group, return value if checked
        return (groupObj.checked) ? groupObj.value : false;
      }
      for (var i=0; i<groupObj.length; i++)
      {
        //Multiple options, return value of checked option
        if (groupObj[i].checked) { return groupObj[i].value; }
      }
      //No option was selected
      return false;
    }

    function updateTotal()
    {
      //Calculate product price
      var product_total = 0;
      var dateFields = document.getElementsByName('date[]');
      for(var i=0; i<dateFields.length; i++)
      {
        product_total += dateFields[i].checked ? parseInt(dateFields[i].getAttribute('data-price')) : 0;
      }
      //Calculate pages price
      var pages_total  = parseInt(document.getElementById('pages').value);
      //Calculate packages price
      var packages_value  = radioGroupValue(document.getElementsByName('packages'));
      var packages_total = (packages_value) ? parseInt(packages_value) : 0;
      //Calculate total price
      var total_price = product_total + pages_total + packages_total;
      //Fill form fields
      document.getElementById('productPrice').value = product_total;
      document.getElementById('pagesPrice').value   = pages_total;
      document.getElementById('packagePrice').value = packages_total;
      document.getElementById('totalPrice').value   = total_price;
    }
    </script>
    </head>

<body>
<table>
  <tr>
    <td id="datecontainer" onchange="Process(this.options[this.selectedIndex].value)">
      <input id="date0" type="checkbox" name="date[]" value="blue" data-price="10" onChange="updateTotal();" />product 1(10)<br />
      <input id="date1" type="checkbox" name="date[]" value="green" data-price="30" onChange="updateTotal();" />product 2(30)<br />
      <input id="date2" type="checkbox" name="date[]" value="red" data-price="50" onChange="updateTotal();" />product 3(50)<br />
    </td>
  <tr>
    <td>
      Total cost Product:
      <input name="total" id="productPrice" type="text" readonly="readonly" />
    </td>
  </tr>
  <tr>
    <td>
      Pages Price
      <select  id="pages" style="width:205px" onchange="updateTotal()">
        <option value="0">Select Pages</option>
        <option value="5">5 Pages</option>
        <option value="10">10 Pages</option>
        <option value="15">15 Pages</option>
        <option value="25">25 Pages</option>
        <option value="30">30 Pages</option>
        <option value="100">More than 35 Pages</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      Total cost Pages:
      <input name="pagesprice" id="pagesPrice" type="text" readonly="readonly" />
    </td>
  </tr>
  <tr>
      <td>Package
          <input type="radio" name="packages" id="packages0" value="100" onclick="updateTotal();" />50MB
          <input type="radio" name="packages" id="packages1" value="200" onclick="updateTotal();" />100MB
          <input type="radio" name="packages" id="packages2" value="300" onclick="updateTotal();" />200MB
      </td>
  </tr>
  <tr>
      <td>
           Total Package Cost:
      <input name="packagecost" id="packagePrice" type="text" readonly="readonly" />
      </td>
  </tr>
  <tr>
    <td>
      Total Pagesprice+Total cost Product+Total Package Cost
      <input name="totalprice" id="totalPrice" type="text" readonly="readonly" />
    </td>    
  </tr>
 
 </table>
</body>

</html>

 

EDIT: Why do you have an onchange event tied to a TD element?

Edited by Psycho
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.