By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,317 Members | 1,312 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,317 IT Pros & Developers. It's quick & easy.

How to insert a valueof variable into text box?

P: 7
Well I know how to pass value of an item from drop down list to a text box, but this ones different. I'm very new to javascript and have no idea how to pass value calculated variable into a text box.
Expand|Select|Wrap|Line Numbers
  1. function calct()
  2. {
  3. var un1=document.getElementById("unit").value;
  4. var qn1=document.getElementById("qty").value;
  5. var x1=eval(un1);
  6. var y1=eval(qn1);
  7. var z1=eval(x1*y1);
  8. document.getElementById("subtl").value= z1;
  9. }
and then i need the value of the variable subtotal in a text box with id subtl
I think its wrong because it gives me NaN as the value for my text box subtl

And i dont know how to generalize a function. I have multiple variable "unit" (unit1, unit2, unit3... ), "qty" (qty1, qty2, qty3...) and aslo 'subtl" so I was wondering if there is a way to use 1 function for all of them?
Aug 12 '09 #1
Share this Question
Share on Google+
5 Replies

Expert Mod 5K+
P: 5,390
you shouldn't ever use eval. all values that you retrieve from a node are 'string'-values first ... so you could use the parseFloat() method to cast them to numbers, i.e.:

Expand|Select|Wrap|Line Numbers
  1. var x1 = parseFloat(un1);
in case the value is not parsable as number then x1 will be NaN = NotANumber ... you could check that before the calculation and react with code :)

to the other point: please show a short example for it so that we could follow how you have your fields and how you want to call the function. basicly you could pass the ids of the nodes to the function and then use them as parameters inside the function.

kind regards
Aug 13 '09 #2

P: 7
There are 6 more rows like this below:
Now I want a way to use the function showprice1 and calc1 in those 6 rows.

Expand|Select|Wrap|Line Numbers
  1. function showprice1()
  2. {
  3. var itm=document.getElementById("item1");
  4. document.getElementById("unit1").value=itm.options[itm.selectedIndex].value;
  5. }
  6. <tr>
  7. <td><select id="item1" onchange="showprice1()">
  8. <option value=0.00 selected>None</option>
  9. <option value=0.95>Shirts</option>
  10. <option value=2.75>Pants</option>
  11. <option value=5.50>Dress</option>
  12. <option value=8.90>Suit</option>
  13. <option value=4.50>Bed Sheets</option>
  14. <option value=3.00>Others</option>
  15. </select>
  16. <script type="text/javascript">
  17. <!--
  18. function calct1()
  19. {
  20. var un1=document.getElementById("unit1").value;
  21. var qn1=document.getElementById("qty1").value;
  22. var x1=parseFloat(un1);
  23. var y1=parseFloat(qn1);
  24. var z1=(x1*y1);
  25. var sb1=z1.toFixed(2);
  26. document.getElementById("sub1").value=sb1;
  27. }
  28. // -->
  29. </script>
  30. <td><input type="text" id="unit1" size="6" maxlength="6" value=0.00 readonly></td>
  31. <td><input type="text" id="qty1" size="6" maxlength="6" value=0 onclick=(this.value="")></td>
  32. <td><input type="submit" value="Calc" onsclick="calct1()"></td>
  33. <td><input type="text" id="sub1" size="6" maxlength="6" value=0.00></td>
  34. </tr>
The parseFloat doesn't work. Could you please tell me what I'm doing wrong.
Thank you very much
Aug 13 '09 #3

Expert Mod 5K+
P: 5,390
it works but you have some errors ... have a look at the following working example:

Expand|Select|Wrap|Line Numbers
  1. <html xmlns="">
  3. <head>
  4. <script type="text/javascript">
  6. function calct1(unId, quId, stId) {
  7.     var un1=document.getElementById(unId).value;
  8.     var qn1=document.getElementById(quId).value;
  9.     var x1=parseFloat(un1);
  10.     var y1=parseFloat(qn1);
  11.     var z1=(x1*y1);
  12.     var sb1=z1.toFixed(2);
  13.     document.getElementById(stId).value=sb1;
  14. }
  16. </script>
  17. </head>
  18. <body>
  19.     <input type="text" id="unit1" size="6" maxlength="6" value="8.00" readonly="readonly">
  20.     <input type="text" id="qty1" size="6" maxlength="6" value="0" onclick="(this.value='')">
  21.     <input type="submit" value="Calc" onclick="calct1('unit1', 'qty1', 'sub1')">
  22.     <input type="text" id="sub1" size="6" maxlength="6" value="0.00">
  23.     <br/><br/>
  24.     <input type="text" id="unit2" size="6" maxlength="6" value="8.00" readonly="readonly">
  25.     <input type="text" id="qty2" size="6" maxlength="6" value=0 onclick="(this.value='')">
  26.     <input type="submit" value="Calc" onclick="calct1('unit2', 'qty2', 'sub2')">
  27.     <input type="text" id="sub2" size="6" maxlength="6" value="0.00">
  28. </body>
  29. </html>
note that you have a wrong onclick that was onsclick and the onclick to reset the values have to be quoted. i even used the field ids to show you haow to pass that as params to the function to use that function genarally ...

kind regards
Aug 14 '09 #4

P: 7
Thank you very much.
This was very helpful. I really appreciate your help.


Aug 15 '09 #5

Expert Mod 5K+
P: 5,390
no problem ... just post back to the forum anytime you have more questions :)

kind regards
Aug 15 '09 #6

Post your reply

Sign in to post your reply or Sign up for a free account.