471,863 Members | 1,335 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

home > topics > javascript > questions > populate second text box based on value extracted from first text box

Join Bytes to post your question to a community of 471,863 software developers and data experts.

Populate second text box based on value extracted from first text box

82
Hi,
I have to extract the value entered in the first text box and based on the value entered have to populate the second text box.
Eg:if the value entered in first text box is like home/version then I have to extract the home and version entered in the text box and the second text box should contain home/version along with that it should contain additional say date information home/version/date.
Can somebody help me do it?

Thanks
Oct 15 '08 #1
51 6577
acoder
16,027 Expert Mod 8TB
Post what code you have so far. Once you access an element using document.getElementById(), you can use the value property to get/set values - see link.

PS. Please Use a Good Thread Title in future. Thanks!
Oct 15 '08 #2
sarega
82
Hi,
I have to populate one text box based on the value entered in the previous text box
eg:if the first text box contains abc/efg/hij then the next text box should contain abc/efg/xyz only if the first text box has abc/efg otherwise user has to enter the value into the next text box.

Thanks
Oct 15 '08 #3
acoder
16,027 Expert Mod 8TB
Threads merged. Please do not double post your questions. Thanks.

Moderator.
Oct 15 '08 #4
sarega
82
Expand|Select|Wrap|Line Numbers
  1. </head>
  2.  <script type='text/javascript'>
  3.  function test1()
  4.  {
  5.     var a = document.getElementById("first").value;
  6.     var b = a.split('/');
  7.     if( b[0] ==  "abc"){
  8.     document.getElementById("second").setAttribute("value",a);
  9.     }
  10.  }
  11.  </script>
  12.  <body>
  13.  <input type="text" id="first" onChange="test1();"/><br><br>
  14.  <input type="text" id="second"/>
  15.  </body>
  16.  </html>
this is the code that I am using can i use a function inside setAttribute?
Oct 15 '08 #5
acoder
16,027 Expert Mod 8TB
Yes, you can replace 'a' with a function call as long as it returns a string.

PS. please use code tags when posting code. Thanks.
Oct 15 '08 #6
sarega
82
Expand|Select|Wrap|Line Numbers
  1. <script type='text/javascript'>
  2.  function test1()
  3.  {
  4.     var a = document.getElementById("first").value;
  5.     var b = a.split('/');
  6.     var d =b[0];
  7.     var c = b[1];
  8.     if( b[0] ==  "abc"){
  9.     document.getElementById("second").setAttribute("value",test2(d,c));
  10.     }
  11.  }
  12.  
  13.  function test2(d,c)
  14.  {
  15.         if ( c == "def" ) {
  16.         var f = "klm";
  17.         var x = d+'/'+c+'/'+f;
  18.         return x;
  19.         }
  20. }
  21.  
  22.  </script>
  23.  <body>
  24.  <input type="text" id="first" onChange="test1();"/><br><br>
  25.  <input type="text" id="second"/>
  26.  
what is wrong with this code? am not getting the required result
Oct 16 '08 #7
Expand|Select|Wrap|Line Numbers
  1. function test1(){ 
  2. var a = document.getElementById("first").value;
  3. var b = a.split('/');
  4. var d =b[0];
  5. var c = b[1];
  6. if((d == "abc")&&(c == "klm")){
  7. document.getElementById("second").value=test2(d,c)
  8. }
  9. }
  10. function test2(d,c){
  11. var f = "klm";
  12. var x = d+'/'+c+'/'+f;
  13. return x;
  14. }
Oct 16 '08 #8
sarega
82
can I include in the setAttribute("value",test2(c,d)) a function which is not within the javascript scope but a function which is within the scope of the html/php?
Expand|Select|Wrap|Line Numbers
  1.  <script type='text/javascript'>
  2.  function test1()
  3.  {
  4.     var a = document.getElementById("first").value;
  5.     var b = a.split('/');
  6.     var d =b[0];
  7.     var c = b[1];
  8.     if( b[0] ==  "abc"){
  9.     document.getElementById("second").setAttribute("value",test2(d,c));
  10.     }
  11.  }
  12.  
  13.  function test2(d,c)
  14.  {
  15.         if ( c == "def" ) {
  16.         var f = "2009";
  17.         var x = c+'/'+'xyz'+'/'+f;
  18.         return x;
  19.         }
  20. }
  21.  
can I use functions which are not present in this particular file to be called in the javascript function test2()
Oct 16 '08 #9
acoder
16,027 Expert Mod 8TB
As long as it's within the same page, it should be OK.

When you say you don't get the required result, please elaborate. What do you expect and what do you get instead?

PS. Please enclose your posted code in [code] tags (See How to Ask a Question). Thanks.
Oct 16 '08 #10
sarega
82
if the function is not present in the present page then how do I access that function in the javascript function??
Oct 16 '08 #11
acoder
16,027 Expert Mod 8TB
Then include it using script tags, e.g.
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" src="file.js"></script>
Oct 16 '08 #12
sarega
82
Actually what I wanted is the values b[0] and b[1] has to be passed to a php function where the processing will be done and then the result of that php function has to be returned to the setAttribute.
Oct 16 '08 #13
acoder
16,027 Expert Mod 8TB
Why didn't you say that earlier?! ;)

What you need is Ajax (if you want to avoid a page reload) unless you can convert the PHP function to JavaScript. If you're new to Ajax, check out the links in the Off-site Links sticky.
Oct 16 '08 #14
sarega
82
Expand|Select|Wrap|Line Numbers
  1. <?php
  2.      $c=$_GET['c'];
  3.      $d=$_GET['d'];
  4.      if($c=="cat") {
  5.         $e=$d.$c;
  6.         }
  7.      ?>
  8. <script type='text/javascript'>
  9. function test1()
  10. {
  11.      var a = document.getElementById("first").value;
  12.      var b = a.split('/');
  13.       var d =b[0];
  14.       var c = b[1];
  15.       if( b[0] ==  "dog"){
  16.       location.href="c.php?d="+d+"&c="+c;
  17.        var js= <?php echo $e; ?>
  18.        document.getElementById("second").setAttribute("value",js);
  19.        }
  20. }
  21.  
  22. </script>
  23. <body>
  24. <input type="text" id="first" size="40" onKeyUp="test1();"/><br><br>
  25. <input type="text" id="second" size="40"/>
  26. </body>
  27.  
what is wrong with this code??
Oct 16 '08 #15
acoder
16,027 Expert Mod 8TB
A lot. You need to put the PHP code in a separate file. To use Ajax, you need to use the XMLHttpRequest object, not location.href. Get a simple Ajax page working first and then extend to your particular problem.
Oct 16 '08 #16
sarega
82
I am new to this javascript so can anyone please tell me how can my problem be solved using ajax.
Thanks
Oct 16 '08 #17
acoder
16,027 Expert Mod 8TB
Have you tried one or two of the tutorials in the thread I linked to? Get that working and understand it first, then you can work on your problem.
Oct 16 '08 #18
sarega
82
Can you please help me with the code its urgent:(
Oct 16 '08 #19
acoder
16,027 Expert Mod 8TB
I can't do it for you, but I can help. Is the latest version of your code still the one you posted in post #15?
Oct 16 '08 #20
sarega
82
How exactly does ajax solve the problem?I could not understand them in the tutorial
Oct 16 '08 #21
acoder
16,027 Expert Mod 8TB
It can, if you want to avoid a page reload. Is that a requirement?
Oct 16 '08 #22
sarega
82
Yes its the same code and i want to avoid a page reload can you help me asap....
Oct 17 '08 #23
sarega
82
How do I pass a variable in ajax to php code and how to extarct it in the php file?
Oct 17 '08 #24
sarega
82
Expand|Select|Wrap|Line Numbers
  1. function test1()
  2.  {
  3.  var a=document.getElementById("first").innerHTML;
  4.  var b=a.split('/');
  5.  var c=b[0];
  6.  var d=b[1];
  7.  if(c!="snow") {
  8.  document.getElementById("second").innerHTML="";
  9.  return;
  10.  }
  11.  xmlHttp=GetXmlHttpObject();
  12.  if(xmlHttp==null) {
  13.  alert("your browser does not support ajax");
  14.  return;
  15.  }
  16.  var url="cd.php";
  17.  url=url+"?d="+d;
  18.  url=url+"&sid="+math.random();
  19.  xmlHttp.onreadystatechange=StateChanged;
  20.  xmlHttp.open("GET",url,true);
  21.  xmlHttp.send(null);
  22.  }
  23.  
  24.  function GetXmlHttpObject()
  25.  {
  26.  var xmlHttp=null;
  27.  try
  28.    {
  29.      // Firefox, Opera 8.0+, Safari
  30.        xmlHttp=new XMLHttpRequest();
  31.          }
  32.          catch (e)
  33.            {
  34.              // Internet Explorer
  35.                try
  36.                    {
  37.                        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  38.                            }
  39.                              catch (e)
  40.                                  {
  41.                                      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  42.                                          }
  43.                                            }
  44.                                            return xmlHttp;
  45.                                            }
  46.  
  47. function StateChanged()
  48. {
  49. if (xmlHttp.readyState==4)
  50. {
  51. document.getElementById("second").innerHTML=xmlHttp.responseText;
  52. }
  53. }
  54. </script>
  55. <body>
  56.  <input type="text" id="first" size="40" onKeyUp="test1();"/><br><br>
  57.  <input type="text" id="second" size="40"/>
  58.  </body>
  59.  </html>
  60.  
and the php code is

[PHP]<?php
$fog=$_GET['d'];
echo $fog;
?>
[/PHP]
What is wrong with this code am not able to print anything in the second text box.
Can somebody reply to it fast plz...
Oct 17 '08 #25
acoder
16,027 Expert Mod 8TB
Instead of setting the text box's innerHTML, set its value property.
Oct 17 '08 #26
sarega
82
even that is not working:(
Oct 17 '08 #27
acoder
16,027 Expert Mod 8TB
Are you getting any errors? Post the latest version of your code with the changes you've made (using code tags please).
Oct 17 '08 #28
sarega
82
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.  "http://www.w3.org/TR/html4/loose.dtd">
  3.  <html>
  4.  <head>
  5.  <title>Untitled Document</title>
  6.  <script type="text/javascript">
  7.  function test1()
  8.  {
  9.  var a=document.getElementById("first").value;
  10.  var b=a.split('/');
  11.  var c=b[0];
  12.  var d=b[1];
  13.  if(c!="fog") {
  14.  document.getElementById("second").value="";
  15.  return;
  16.  }
  17.  xmlHttp=GetXmlHttpObject();
  18.  if(xmlHttp==null) {
  19.  alert("your browser does not support ajax");
  20.  return;
  21.  }
  22.  var url="cd.php";
  23.  url=url+"?d="+d;
  24.  url=url+"&sid="+Math.random();
  25.  xmlHttp.onreadystatechange=StateChanged;
  26.  xmlHttp.open("GET",url,true);
  27.  xmlHttp.send(null);
  28.  }
  29.  
  30.  function GetXmlHttpObject()
  31.  {
  32.  var xmlHttp=null;
  33.  try
  34.    {
  35.      // Firefox, Opera 8.0+, Safari
  36.        xmlHttp=new XMLHttpRequest();
  37.          }
  38.          catch (e)
  39.            {
  40.              // Internet Explorer
  41.                try
  42.                    {
  43.                        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  44.                            }
  45.                              catch (e)
  46.                                  {
  47.                                      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  48.                                          }
  49.                                            }
  50.                                            return xmlHttp;
  51.                                            }
  52.  
  53. function StateChanged()
  54. {
  55. if (xmlHttp.readyState==4)
  56. {
  57. document.getElementById("second").value=xmlHttp.responseText;
  58. }
  59. }
  60. </script>
  61. </head>
  62. <body>
  63.  <input type="text" id="first" size="40" onkeyup="test1();"/><br><br>
  64.  <input type="text" id="second" size="40"/>
  65.  </body>
  66.  </html>
php code is
Expand|Select|Wrap|Line Numbers
  1. <?php
  2. $fog=$_GET['d'];
  3. echo $fog;
  4. ?>
Oct 17 '08 #29
acoder
16,027 Expert Mod 8TB
Please enclose your posted code in [code] tags (See How to Ask a Question).

This makes it easier for our Experts to read and understand it. Failing to do so creates extra work for the moderators, thus wasting resources, otherwise available to answer the members' questions.

Please use [code] tags in future. Thanks.

Moderator.
Oct 17 '08 #30
acoder
16,027 Expert Mod 8TB
Are there any errors? If so, post the message(s) that you see.

Is the PHP file called cd.php?
Oct 17 '08 #31
sarega
82
Am not getting any errors its just that second text box is not getting populated, and the php file is called cd.php
And one more thing can I include a javascript file in the header of the html file and still have more javascript functions in the same html file??
Oct 17 '08 #32
acoder
16,027 Expert Mod 8TB
The answer to your question is yes, you can.

I just tested your code in Firefox and it works absolutely fine (except for undefined temporarily appearing which you can easily get rid of). Which browsers are you testing on?
Oct 17 '08 #33
sarega
82
Ya now its working.....thanks for all the help
Oct 17 '08 #34
acoder
16,027 Expert Mod 8TB
You're welcome. Glad it is!

Did you make any changes? What was the problem in the end?
Oct 17 '08 #35
sarega
82
I had another doubt, the php code can it have call to functions which are defined in a different directory?
Oct 17 '08 #36
acoder
16,027 Expert Mod 8TB
That's a PHP question, but yes. If you have problems on that front, start a new thread in the PHP forum.
Oct 17 '08 #37
sarega
82
Thanks for the help.....
Oct 18 '08 #38
acoder
16,027 Expert Mod 8TB
You're welcome :) Post back to the forum if you have more questions.
Oct 20 '08 #39
sarega
82
hi, can I make the second text box readonly after populating it with a value? how to do it??
Oct 21 '08 #40
Expand|Select|Wrap|Line Numbers
  1. myElement.disabled=true
that works for pretty much all input type elements
Oct 21 '08 #41
sarega
82
Expand|Select|Wrap|Line Numbers
  1. #
  2. #  "http://www.w3.org/TR/html4/loose.dtd">
  3. #  <html>
  4. #  <head>
  5. #  <title>Untitled Document</title>
  6. #  <script type="text/javascript">
  7. #  function test1()
  8. #  {
  9. #  var a=document.getElementById("first").value;
  10. #  var b=a.split('/');
  11. #  var c=b[0];
  12. #  var d=b[1];
  13. #  if(c!="fog") {
  14. #  document.getElementById("second").value="";
  15. #  return;
  16. #  }
  17. #  xmlHttp=GetXmlHttpObject();
  18. #  if(xmlHttp==null) {
  19. #  alert("your browser does not support ajax");
  20. #  return;
  21. #  }
  22. #  var url="cd.php";
  23. #  url=url+"?d="+d;
  24. #  url=url+"&sid="+Math.random();
  25. #  xmlHttp.onreadystatechange=StateChanged;
  26. #  xmlHttp.open("GET",url,true);
  27. #  xmlHttp.send(null);
  28. #  }
  29. #  
  30. #  function GetXmlHttpObject()
  31. #  {
  32. #  var xmlHttp=null;
  33. #  try
  34. #    {
  35. #      // Firefox, Opera 8.0+, Safari
  36. #        xmlHttp=new XMLHttpRequest();
  37. #          }
  38. #          catch (e)
  39. #            {
  40. #              // Internet Explorer
  41. #                try
  42. #                    {
  43. #                        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  44. #                            }
  45. #                              catch (e)
  46. #                                  {
  47. #                                      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  48. #                                          }
  49. #                                            }
  50. #                                            return xmlHttp;
  51. #                                            }
  52. #  
  53. # function StateChanged()
  54. # {
  55. # if (xmlHttp.readyState==4)
  56. # {
  57. # document.getElementById("second").value=xmlHttp.responseText;
  58. # }
  59. # }
  60. # </script>
  61. # </head>
  62. # <body>
  63. #  <input type="text" id="first" size="40" onkeyup="test1();"/><br><br>
  64. #  <input type="text" id="second" size="40"/>
  65. #  </body>
  66. #  </html>
  67.  
In this code how do I make the second text box readonly??
Oct 21 '08 #42
looks like line 57 is:

Expand|Select|Wrap|Line Numbers
  1.  document.getElementById("second").value=xmlHttp.responseText;
I think if you add:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("second").disabled=true
before the close squigly ( ' } ' ) on line 58 it should do it
Oct 21 '08 #43
sarega
82
I have introduced a check box only if the check box is clicked only then the second text box has to be populated how can i check everytime whether the check box is clicked or not?
Oct 21 '08 #44
sarega
82
Expand|Select|Wrap|Line Numbers
  1. "http://www.w3.org/TR/html4/loose.dtd">
  2.   <html>
  3.   <head>
  4.   <title>Untitled Document</title>
  5.   <script type="text/javascript">
  6.   function test1()
  7.   {
  8.   var a=document.getElementById("first").value;
  9.   var b=a.split('/');
  10.   var c=b[0];
  11.   var d=b[1];
  12.   if(c!="fog") {
  13.   document.getElementById("second").value="";
  14.   return;
  15.   }
  16.   xmlHttp=GetXmlHttpObject();
  17.   if(xmlHttp==null) {
  18.   alert("your browser does not support ajax");
  19.   return;
  20.   }
  21.   var url="cd.php";
  22.   url=url+"?d="+d;
  23.   url=url+"&sid="+Math.random();
  24.   xmlHttp.onreadystatechange=StateChanged;
  25.   xmlHttp.open("GET",url,true);
  26.   xmlHttp.send(null);
  27.   }
  28.  
  29.   function GetXmlHttpObject()
  30.   {
  31.   var xmlHttp=null;
  32.   try
  33.     {
  34.       // Firefox, Opera 8.0+, Safari
  35.         xmlHttp=new XMLHttpRequest();
  36.           }
  37.           catch (e)
  38.             {
  39.               // Internet Explorer
  40.                 try
  41.                     {
  42.                         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  43.                             }
  44.                               catch (e)
  45.                                   {
  46.                                       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  47.                                           }
  48.                                             }
  49.                                             return xmlHttp;
  50. }                                            }
  51.  
  52.  function StateChanged()
  53.  {
  54.   if (xmlHttp.readyState==4)
  55.   {
  56.   document.getElementById("second").value=xmlHttp.responseText;
  57.   }
  58.   }
  59.   </script>
  60.   </head>
  61.   <body>
  62.    <input type="text" id="first" size="40"/>
  63. <input type="checkbox" id="third" onClick="test1()";/><br><br>
  64.    <input type="text" id="second" size="40"/>
  65.    </body>
  66.    </html>
  67.  
If only the the check box is clicked only then the second text box has to be populated, even for the first time the check box is clicked and then later if it is unchecked then it should not populate the second text box for the second time.
Can somebody plz help me??
Oct 21 '08 #45
acoder
16,027 Expert Mod 8TB
Please enclose your posted code in [code] tags (See How to Ask a Question).

This makes it easier for our Experts to read and understand it. Failing to do so creates extra work for the moderators, thus wasting resources, otherwise available to answer the members' questions.

Please use [code] tags in future.

Moderator.
Oct 21 '08 #46
acoder
16,027 Expert Mod 8TB
I have introduced a check box only if the check box is clicked only then the second text box has to be populated how can i check everytime whether the check box is clicked or not?
Use the checked property of the checkbox.
Oct 21 '08 #47
sarega
82
I have used this
if(document.getElementById("third").checked==true) but its not working can somebody tell me the reason??
Oct 22 '08 #48
acoder
16,027 Expert Mod 8TB
Use a button or onkeyup (as you had earlier) to call the function, not onclick on the checkbox.
Oct 22 '08 #49
sarega
82
ok thanks for the reply
Oct 22 '08 #50

Post your reply

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

Similar topics
Auto populate the Dropdown List
11 posts views Thread by eureka | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2023
About Bytes
Advertise
Terms Of Use
Privacy Policy
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates