How to add and display using javascript on the fly ???

  • rrasin
  • Newbie
  • Newbie
  • User avatar
  • Posts: 11

Post 3+ Months Ago

I am fetching data from mysql databse using php and displaying in a text box. In the next text box user enters a value. When user press tab key i want the value in the first text box(fetched from textbox) to be added with the second text box (user value) and to be displayed in the third text box. Please help me with javascript !!! thanks.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Code: [ Select ]
<html>
<head>
    <script language="JavaScript">
        function concat(input1,input2,output)
        {
            var first = document.getElementById(input1);
            var second = document.getElementById(input2);
            var third = document.getElementById(output);
            
            third.value = first.value + " " + second.value; //the space in the middle is optional, of course
        }
    </script>
</head>
<body>
    <input type="text" id="box1" size="20" value="rrasin" />
    <input type="text" id="box2" size="20" onBlur="concat('box1','box2','box3');" />
    <input type="text" id="box3" size="20"/>
</body>
</html>
  1. <html>
  2. <head>
  3.     <script language="JavaScript">
  4.         function concat(input1,input2,output)
  5.         {
  6.             var first = document.getElementById(input1);
  7.             var second = document.getElementById(input2);
  8.             var third = document.getElementById(output);
  9.             
  10.             third.value = first.value + " " + second.value; //the space in the middle is optional, of course
  11.         }
  12.     </script>
  13. </head>
  14. <body>
  15.     <input type="text" id="box1" size="20" value="rrasin" />
  16.     <input type="text" id="box2" size="20" onBlur="concat('box1','box2','box3');" />
  17.     <input type="text" id="box3" size="20"/>
  18. </body>
  19. </html>


see Demo here

Click in the second input and start typing. Tab out and the first + second are written to the third.
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

Nice :)
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Thank ya. One of the easier requests I've seen come through in a few days. :)
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

Agreed, nice when you get the simple requests and not "I need help building the next best thing just javascript, mysql and file io is needed" :shock:
  • rrasin
  • Newbie
  • Newbie
  • User avatar
  • Posts: 11

Post 3+ Months Ago

vow .... great !!!! .... thanks a lot UPSGuy ..... But I forgot to say that the two values to be added are numbers not strings. Please change the script to work for integers. thanks a lot for sparing ur time.
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

Code: [ Select ]
 
<html>
<head>
    <script language="JavaScript">
        function concat(input1,input2,output)
        {
            var first = document.getElementById(input1);
            var second = document.getElementById(input2);
            var third = document.getElementById(output);
           
            third.value = parseInt(first.value) + parseInt(second.value); //if you require floating point numbers try parseFloat
        }
    </script>
</head>
<body>
    <input type="text" id="box1" size="20" value="rrasin" />
    <input type="text" id="box2" size="20" onBlur="concat('box1','box2','box3');" />
    <input type="text" id="box3" size="20"/>
</body>
</html>
 
  1.  
  2. <html>
  3. <head>
  4.     <script language="JavaScript">
  5.         function concat(input1,input2,output)
  6.         {
  7.             var first = document.getElementById(input1);
  8.             var second = document.getElementById(input2);
  9.             var third = document.getElementById(output);
  10.            
  11.             third.value = parseInt(first.value) + parseInt(second.value); //if you require floating point numbers try parseFloat
  12.         }
  13.     </script>
  14. </head>
  15. <body>
  16.     <input type="text" id="box1" size="20" value="rrasin" />
  17.     <input type="text" id="box2" size="20" onBlur="concat('box1','box2','box3');" />
  18.     <input type="text" id="box3" size="20"/>
  19. </body>
  20. </html>
  21.  
  • rrasin
  • Newbie
  • Newbie
  • User avatar
  • Posts: 11

Post 3+ Months Ago

sorry friends for troubling you .... its again concatenating the integers not the values. please help me. thanks dear.
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

see above for revised function
  • rrasin
  • Newbie
  • Newbie
  • User avatar
  • Posts: 11

Post 3+ Months Ago

Thanks 'Rabid Dog'. Now its working fine. Great help.
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

Thanks to UPSGuy for the intial work!
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

Hey, I could get used to this - I go to sleep, wake up, and my code has evolved! :lol: Thanks RD for picking up while I snoozed :)
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

No problem bud :)
  • rrasin
  • Newbie
  • Newbie
  • User avatar
  • Posts: 11

Post 3+ Months Ago

Nice to see all guys are helping .... thanks ...

Post Information

  • Total Posts in this topic: 14 posts
  • Users browsing this forum: No registered users and 136 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.