473,246 Members | 1,400 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,246 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 6794
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

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

Similar topics

1
by: Swadh | last post by:
Hi, I need urgent help on Windows Form datagrid. I have to Display a datagrid that has a textbox column and another one combo box column. I have two tables in my Access database as: Table 1:...
3
by: Alonso | last post by:
Hi, I have two drop downs and the content of the second one must changed everytime the user changes the selection in the first one. Is any easy way of doing this? Thanks in advance. Alonso
1
by: vj | last post by:
How i can populate all fileds dynamically in jsp page based on contents found in xml file? I have written jsp servlets and java class file. i transferred automatic data from jsp to servlet then to...
0
by: vijendra | last post by:
How i can populate all fileds dynamically in jsp page based on contents found in xml file?I have written jsp servlets and java class file. i transferred automatic data from jsp to servlet then to...
11
by: eureka | last post by:
Hi All, I'm training in Servlets, JSP and JavaScript, I have a web page in which there's a "StudentName" textbox and below it is a "Names" Dropdown list. Initially the Textbox is empty and...
3
by: joseph.mccastlain | last post by:
Hello All, I am a new user to Access. I am currently designing a database consisting of four tables for multiple users. Rather than bore you with the goals and such, here is what I am...
4
by: whamo | last post by:
I have the need to populate a field based on the selection in a combo box. Starting out simple. (2) tables tbl_OSE_Info and tbl_Input; tbl_OSE_Info has three fields: Key, OSE_Name and OSE_Wt...
2
by: Ronald | last post by:
I hope somebody can help. I can't get into the specifics of my project, but I'll try to create a simple example: tblVehicle * VIN (text box) * Make (text box) * Model (text box) frmRepair
4
by: zion4ever | last post by:
Hello good people, Please bear with me as this is my first post and I am relative new to ASP. I do have VB6 experience. I have a form which enables users within our company to do an intranet...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...

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.