Back To Programming / Scripting / Coding Forum

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

  • rrasin
  • Newbie
  • Newbie
  • User avatar
  • Joined: Jul 07, 2009
  • Posts: 11
  • Status: Offline

Post July 7th, 2009, 9:07 am

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
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post July 7th, 2009, 9:07 am

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post July 7th, 2009, 10:10 am

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.
I'd love to change the world, but they won't give me the source code.
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Joined: May 21, 2004
  • Posts: 3229
  • Loc: South Africa
  • Status: Offline

Post July 7th, 2009, 1:53 pm

Nice :)
Watch me grow
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post July 7th, 2009, 1:55 pm

Thank ya. One of the easier requests I've seen come through in a few days. :)
I'd love to change the world, but they won't give me the source code.
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Joined: May 21, 2004
  • Posts: 3229
  • Loc: South Africa
  • Status: Offline

Post July 7th, 2009, 2:06 pm

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:
Watch me grow
  • rrasin
  • Newbie
  • Newbie
  • User avatar
  • Joined: Jul 07, 2009
  • Posts: 11
  • Status: Offline

Post July 8th, 2009, 1:58 am

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
  • Joined: May 21, 2004
  • Posts: 3229
  • Loc: South Africa
  • Status: Offline

Post July 8th, 2009, 2:53 am

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.  
Watch me grow
  • rrasin
  • Newbie
  • Newbie
  • User avatar
  • Joined: Jul 07, 2009
  • Posts: 11
  • Status: Offline

Post July 8th, 2009, 3:07 am

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
  • Joined: May 21, 2004
  • Posts: 3229
  • Loc: South Africa
  • Status: Offline

Post July 8th, 2009, 3:24 am

see above for revised function
Watch me grow
  • rrasin
  • Newbie
  • Newbie
  • User avatar
  • Joined: Jul 07, 2009
  • Posts: 11
  • Status: Offline

Post July 8th, 2009, 3:38 am

Thanks 'Rabid Dog'. Now its working fine. Great help.
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Joined: May 21, 2004
  • Posts: 3229
  • Loc: South Africa
  • Status: Offline

Post July 8th, 2009, 3:42 am

Thanks to UPSGuy for the intial work!
Watch me grow
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post July 8th, 2009, 4:44 am

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 :)
I'd love to change the world, but they won't give me the source code.
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Joined: May 21, 2004
  • Posts: 3229
  • Loc: South Africa
  • Status: Offline

Post July 8th, 2009, 4:54 am

No problem bud :)
Watch me grow
  • rrasin
  • Newbie
  • Newbie
  • User avatar
  • Joined: Jul 07, 2009
  • Posts: 11
  • Status: Offline

Post July 8th, 2009, 5:06 am

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

Page 1 of 1

Post Information

  • Total Posts in this topic: 14 posts
  • Users browsing this forum: No registered users and 153 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
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.