How to insert a valueof variable into text box?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • rjddude1
    New Member
    • Aug 2009
    • 7
    #1

    How to insert a valueof variable into text box?

    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.
    Code:
    function calct()
{
var un1=document.getElementById("unit").value;
var qn1=document.getElementById("qty").value;
var x1=eval(un1);
var y1=eval(qn1);
var z1=eval(x1*y1);
document.getElementById("subtl").value= z1;
}
    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?
    Last edited by rjddude1; Aug 12 '09, 07:03 PM. Reason: I forgot to mention something
    Tags: insert, javascript, product, text box, variable
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5388
      #2
      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.:

      Code:
      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

        Comment

        • rjddude1
          New Member
          • Aug 2009
          • 7
          #3
          There are 6 more rows like this below:
          Now I want a way to use the function showprice1 and calc1 in those 6 rows.

          Code:
          function showprice1()
{
var itm=document.getElementById("item1");
document.getElementById("unit1").value=itm.options[itm.selectedIndex].value;
}
<tr>
<td><select id="item1" onchange="showprice1()">
<option value=0.00 selected>None</option>
<option value=0.95>Shirts</option>
<option value=2.75>Pants</option>
<option value=5.50>Dress</option>
<option value=8.90>Suit</option>
<option value=4.50>Bed Sheets</option>
<option value=3.00>Others</option>
</select>
<script type="text/javascript">
<!--
function calct1()
{
var un1=document.getElementById("unit1").value;
var qn1=document.getElementById("qty1").value;
var x1=parseFloat(un1);
var y1=parseFloat(qn1);
var z1=(x1*y1);
var sb1=z1.toFixed(2);
document.getElementById("sub1").value=sb1;
}
// -->
</script>
<td><input type="text" id="unit1" size="6" maxlength="6" value=0.00 readonly></td>
<td><input type="text" id="qty1" size="6" maxlength="6" value=0 onclick=(this.value="")></td>
<td><input type="submit" value="Calc" onsclick="calct1()"></td>
<td><input type="text" id="sub1" size="6" maxlength="6" value=0.00></td>
</tr>
          The parseFloat doesn't work. Could you please tell me what I'm doing wrong.
          Thank you very much

            Comment

            • gits
              Recognized Expert Moderator Expert
              • May 2007
              • 5388
              #4
              it works but you have some errors ... have a look at the following working example:

              Code:
              <html xmlns="http://www.w3.org/1999/xhtml">

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

function calct1(unId, quId, stId) {
    var un1=document.getElementById(unId).value;
    var qn1=document.getElementById(quId).value;
    var x1=parseFloat(un1);
    var y1=parseFloat(qn1);
    var z1=(x1*y1);
    var sb1=z1.toFixed(2);
    document.getElementById(stId).value=sb1;
}

</script>
</head>
<body>
    <input type="text" id="unit1" size="6" maxlength="6" value="8.00" readonly="readonly">
    <input type="text" id="qty1" size="6" maxlength="6" value="0" onclick="(this.value='')">
    <input type="submit" value="Calc" onclick="calct1('unit1', 'qty1', 'sub1')">
    <input type="text" id="sub1" size="6" maxlength="6" value="0.00">
    <br/><br/>
    <input type="text" id="unit2" size="6" maxlength="6" value="8.00" readonly="readonly">
    <input type="text" id="qty2" size="6" maxlength="6" value=0 onclick="(this.value='')">
    <input type="submit" value="Calc" onclick="calct1('unit2', 'qty2', 'sub2')">
    <input type="text" id="sub2" size="6" maxlength="6" value="0.00">
</body>
</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

                Comment

                • rjddude1
                  New Member
                  • Aug 2009
                  • 7
                  #5
                  Thank you very much.
                  This was very helpful. I really appreciate your help.

                  Regards

                  RD

                    Comment

                    • gits
                      Recognized Expert Moderator Expert
                      • May 2007
                      • 5388
                      #6
                      no problem ... just post back to the forum anytime you have more questions :)

                      kind regards

                        Comment

                        Previous template Next
                        Working...