By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
463,008 Members | 612 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > javascript / ajax / dhtml > questions > populate second text box based on value extracted from first text box
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 463,008 IT Pros & Developers. It's quick & easy.

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

P: 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
Share this Question
Share on Google+
51 Replies
acoder
Expert Mod 15k+
P: 16,027
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
P: 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
Expert Mod 15k+
P: 16,027
Threads merged. Please do not double post your questions. Thanks.

Moderator.
Oct 15 '08 #4
P: 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
Expert Mod 15k+
P: 16,027
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
P: 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
P: 55
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
P: 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
Expert Mod 15k+
P: 16,027
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
P: 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
Expert Mod 15k+
P: 16,027
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
P: 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
Expert Mod 15k+
P: 16,027
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
P: 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
Expert Mod 15k+
P: 16,027
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
P: 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
Expert Mod 15k+
P: 16,027
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
P: 82
Can you please help me with the code its urgent:(
Oct 16 '08 #19
acoder
Expert Mod 15k+
P: 16,027
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
P: 82
How exactly does ajax solve the problem?I could not understand them in the tutorial
Oct 16 '08 #21
acoder
Expert Mod 15k+
P: 16,027
It can, if you want to avoid a page reload. Is that a requirement?
Oct 16 '08 #22
P: 82
Yes its the same code and i want to avoid a page reload can you help me asap....
Oct 17 '08 #23
P: 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
P: 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
Expert Mod 15k+
P: 16,027
Instead of setting the text box's innerHTML, set its value property.
Oct 17 '08 #26
P: 82
even that is not working:(
Oct 17 '08 #27
acoder
Expert Mod 15k+
P: 16,027
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
P: 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
Expert Mod 15k+
P: 16,027
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
Expert Mod 15k+
P: 16,027
Are there any errors? If so, post the message(s) that you see.

Is the PHP file called cd.php?
Oct 17 '08 #31
P: 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
Expert Mod 15k+
P: 16,027
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
P: 82
Ya now its working.....thanks for all the help
Oct 17 '08 #34
acoder
Expert Mod 15k+
P: 16,027
You're welcome. Glad it is!

Did you make any changes? What was the problem in the end?
Oct 17 '08 #35
P: 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
Expert Mod 15k+
P: 16,027
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
P: 82
Thanks for the help.....
Oct 18 '08 #38
acoder
Expert Mod 15k+
P: 16,027
You're welcome :) Post back to the forum if you have more questions.
Oct 20 '08 #39
P: 82
hi, can I make the second text box readonly after populating it with a value? how to do it??
Oct 21 '08 #40
P: 55
Expand|Select|Wrap|Line Numbers
  1. myElement.disabled=true
that works for pretty much all input type elements
Oct 21 '08 #41
P: 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
P: 55
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
P: 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
P: 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
Expert Mod 15k+
P: 16,027
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
Expert Mod 15k+
P: 16,027
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
P: 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
Expert Mod 15k+
P: 16,027
Use a button or onkeyup (as you had earlier) to call the function, not onclick on the checkbox.
Oct 22 '08 #49
P: 82
ok thanks for the reply
Oct 22 '08 #50
51 Replies

Post your reply

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

Question stats

  • viewed: 6278
  • replies: 51
  • date asked: Oct 15 '08
BYTES.COM © 2020 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | JavaScript / Ajax / DHTML Answers Sitemap | JavaScript / Ajax / DHTML Insights Sitemap

Follow us to get the Latest Bytes Updates