473,397 Members | 2,068 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,397 software developers and data experts.

how can I output the value of the select tag to the text field using JavaScript

Exequiel
288 256MB
Expand|Select|Wrap|Line Numbers
  1. <html xmlns="http://www.w3.org/1999/xhtml"><head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>Untitled Document</title>
  4. <script type="text/javascript">
  5.  
  6. function ikel(){
  7.  
  8.     var sel = document.ikki.sel.value;
  9.  
  10.      var les = document.getElementById("les");
  11.  
  12.  
  13.         if(sel=="ikki"){
  14.                 les.innerHTML = "ikki selected";
  15.  
  16.             }
  17.             else if(sel=="zick"){
  18.                     les.innerHTML = "zick selected";
  19.                 }
  20.             else if(sel=="ikel"){
  21.                     les.innerHTML = "ikel selected";
  22.                 }                
  23. }
  24. </script>
  25. </head>
  26.  
  27. <body bgcolor="#999999">
  28.     <center>
  29.     <form name="ikki" >
  30.  
  31.         <table>
  32.             <tr>
  33.                 <td>
  34.                 <select onchange="ikel()" name="sel">
  35.                     <option onchange="ikel()" name="sele">ikki</option>
  36.                     <option onchange="ikel()" name="sele">zick</option>
  37.                     <option onchange="ikel()" name="sele">ikel</option>
  38.                 </select>
  39.                 </td>
  40.             </tr>
  41.         </table>
  42.          result=<font color="#990000"><span class="result" id="les" spry:content="ikel()"></span></font><br>
  43.                    <input type="text" name="put" id="les" onchange="ikel()">
  44.                 <br>     
  45.  
  46.  
  47.  
  48.     </form>
  49.     <!--hello I need Help... how can I output the value of the select tag to the text field using javascript... please help me... thank you .... and Godbless-->
  50.     </center>
  51.     <center>
  52.  
  53.     </center>
  54. </body>
  55. </html>
Jul 5 '12 #1

✓ answered by ariful alam

Are you trying this:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <head>
  4.     <script language='javascript' type='text/javascript'>
  5.         function changer()
  6.         {
  7.             document.getElementById('txt_box').value=document.getElementById('sel_box').options[document.getElementById('sel_box').selectedIndex].value;//Value;
  8.         }
  9.     </script>
  10. </head>
  11.  
  12. <body>
  13.  
  14.     <select id='sel_box' onchange='javascript:changer();'>
  15.         <option>orange</option>
  16.         <option>white</option>
  17.         <option>red</option>
  18.         <option>green</option>
  19.     </select>
  20.  
  21.     <input id='txt_box' type='text' value='message' size='50'/>
  22.  
  23. </body>
  24. </html>
  25.  

18 5505
Dormilich
8,658 Expert Mod 8TB
how can I output the value of the select tag to the text field using javascript
by using the right properties. an <input> element is always empty, hence it does not have an .innerHTML property!

additionally, <option> elements do not have a name (what for?) and they also do not change (hence the onchange property is pointless).
Jul 5 '12 #2
Exequiel
288 256MB
i forgot to delete the option name... can you give some example code to output the value from select tag to textfield? please... and thank you very much for your response :)
Jul 5 '12 #3
ariful alam
185 100+
Are you trying this:
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <head>
  4.     <script language='javascript' type='text/javascript'>
  5.         function changer()
  6.         {
  7.             document.getElementById('txt_box').value=document.getElementById('sel_box').options[document.getElementById('sel_box').selectedIndex].value;//Value;
  8.         }
  9.     </script>
  10. </head>
  11.  
  12. <body>
  13.  
  14.     <select id='sel_box' onchange='javascript:changer();'>
  15.         <option>orange</option>
  16.         <option>white</option>
  17.         <option>red</option>
  18.         <option>green</option>
  19.     </select>
  20.  
  21.     <input id='txt_box' type='text' value='message' size='50'/>
  22.  
  23. </body>
  24. </html>
  25.  
Jul 5 '12 #4
Dormilich
8,658 Expert Mod 8TB
make that document.getElementById('txt_box').value = document.getElementById('sel_box').value;, the value attribute for the <option>s has not been set.
Jul 5 '12 #5
ariful alam
185 100+
The outputs are similar.
Jul 5 '12 #6
Exequiel
288 256MB
thank you ariful alam, but i need to output the value of select tag to textbox using if/else if statement...
Expand|Select|Wrap|Line Numbers
  1.  if(sel=="ikki"){
  2.                 les.innerHTML = "ikki selected";
  3.  
  4.             }
  5.             else if(sel=="zick"){
  6.                     les.innerHTML = "zick selected";
  7.                 }
  8.             else if(sel=="ikel"){
  9.                     les.innerHTML = "ikel selected";
  10.                 }                
for example... I selected "zick" in select tag. the value that must be output to textfield is "zick selected".... you gave to me the value of select tag and you output it to textfield... and you dont used if/else if statements to your javascript function... thank you :)
Jul 8 '12 #7
Exequiel
288 256MB
I've got it !.... thank you for some sample codes that you made...

Expand|Select|Wrap|Line Numbers
  1.  
  2. <html>
  3.  
  4. <head>
  5.     <script language='javascript' type='text/javascript'>
  6.  
  7. function ikel()
  8. {
  9.  
  10.     var sel = document.ikki.sel.value;
  11.  
  12.     if(sel=="Zick")
  13.             {
  14.      document.getElementById('txt_box').value=document.getElementById('select_tag').options[document.getElementById('select_tag').selectedIndex].value="Zick is Emo!";
  15.             }
  16.     if(sel=="Ikel")
  17.             {
  18.      document.getElementById('txt_box').value=document.getElementById('select_tag').options[document.getElementById('select_tag').selectedIndex].value="Ikel is Handsome!";
  19.             }
  20.     if(sel=="Ikki")
  21.             {
  22.      document.getElementById('txt_box').value=document.getElementById('select_tag').options[document.getElementById('select_tag').selectedIndex].value="Ikki is naughty!";
  23.             }
  24. }
  25.     </script>
  26. </head>
  27.  
  28. <body>
  29.  <form name="ikki">
  30.  
  31.     <select id="select_tag" onchange="ikel()" name="sel">
  32.         <option>Zick</option>
  33.         <option>Ikel</option>
  34.         <option>Ikki</option>
  35.     </select>
  36.  
  37.     <input id='txt_box' type='text' value='select to select tag' onchange="ikel()"/>
  38.  </form>
  39. </body>
  40. </html>
  41.  
  42.  
thats my code to out put the value of select tag to textfield using if statement... hehe... thank you for some response... salamat..
Jul 9 '12 #8
ariful alam
185 100+
@Exequiel

What you did, is wrong. You did the following to show a spacific message in text box for every selection from select box:

Expand|Select|Wrap|Line Numbers
  1. document.getElementById('txt_box').value=document.getElementById('select_tag').options[document.getElementById('select_tag').selectedIndex].value="Message is here";
  2.  
but by doing this you can change text box message one time for every selection. means if you select "ikel" first time it will show the message for "ikel". but selecting again "ikel" after selecting any other name, it will not show the message for "ikel".

because you used the following setting:

text box value = selected value = message

this change text in text box as well as change the value of select tag's value of selected text.

so, you need to do the following to show the specific message for specific selected text every time:

Expand|Select|Wrap|Line Numbers
  1. document.getElementById('txt_box').value="Message is here.";
  2.  
Hope you understand. :)
Jul 9 '12 #9
Exequiel
288 256MB
Thank you for your codes Mr. ariful alam... :)
Jul 12 '12 #10
ariful alam
185 100+
You are most welcome, Exequiel. :)
Jul 12 '12 #11
Exequiel
288 256MB
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>E Vibar</title>
  4. <script type="text/javascript">
  5. function ikel()
  6. {
  7.     var sel = document.ikki.sel.value;
  8.     if(sel=="T-shirt")
  9.     {    
  10.             document.ikki.brand.options.length=0;
  11.             document.ikki.tekz.value=null;
  12.         var shirt = ["bench","cotton republic"];
  13.         var shirt_len=shirt.length;
  14.         for(var ii=0; ii<shirt_len; ii++)
  15.         {
  16.              document.ikki.brand.options[ii]=new Option(shirt[ii], ii);    
  17.                 if(shirt[ii]=="bench")
  18.                 {
  19.                     document.ikki.tekz.value="Bench is Selected";
  20.                 }
  21.                 else if(shirt[ii]=="cotton republic")
  22.                 {
  23.                     document.ikki.tekz.value="Cotton Republic is selected";
  24.                 }
  25.             } 
  26.     }//end of if statement T-shirt
  27.  
  28.     if(sel=="CARS")
  29.     {    
  30.         var car = ["Toyota","Honda", "Forbes", "Mitsubishi", "Kia", "Nissan"];
  31.         var car_len=car.length;
  32.         var cc=0;
  33.             document.ikki.brand.options.length=0;
  34.             document.ikki.tekz.value=null;
  35.         for(var cc=0; cc<car_len; cc++)
  36.         {
  37.              document.ikki.brand.options[cc]=new Option(car[cc], cc);            
  38.             }
  39.     }//end of if statement Cars
  40.  
  41.     if(sel=="Porn Site")
  42.     {     
  43.         var por = ["Mofos.com","Naughty America.com", "Erotica.com"];
  44.         var por_len=por.length;
  45.         var xx=0;
  46.             document.ikki.brand.options.length=0;
  47.             document.ikki.tekz.value=null;
  48.         for(var xx=0; xx<por_len; xx++)
  49.         {
  50.              document.ikki.brand.options[xx]=new Option(por[xx], xx);            
  51.             }
  52.     }//end of if statement Pron Sites    
  53. }//end of function ikel
  54. window.onload=ikel;
  55. </script>
  56. </head>
  57. <body>
  58. <form name="ikki">
  59.         Menu <select name="sel"  onclick="ikel()" id="selected" >
  60.                    <option >T-shirt</option>
  61.                    <option >CARS</option>
  62.                    <option >Porn Site</option> 
  63.              </select> 
  64.         Brand <select name="brand" ><!--option output--></select>         
  65.              <input type="text" name="tekz" id="tikz" onchange="ikel()"/>  
  66. </form>
  67. </body>
  68. </html>
Jul 12 '12 #12
Exequiel
288 256MB
I have a problem Inside the if/else if statement... Every time I choose in the Menu select tag the T-shirt, in the Brand Select tag The first is the bench, but the output in the text field is the "Cotton Republic is selected", and when I'm going to select the bench it doesn't change the value in the text field... What syntax I must use just to output the right value? ? . . . :) Thank you :)
Jul 12 '12 #13
ariful alam
185 100+
You are doing wrong. you are trying to do two work using one fucntion named ikel(). you have to create two individual function like data_binder() and message_shower().

the data_binder() function binds new data to "brand" select tag by every selection of "sel" select tag.

and the message_shower() function add value to "tikz" textbox by every selection of "brand" select tag.

moreover, there is another fault in your tag.

you have to use data_binder() function in "onclick" or "onchange" event of "sel" select tag.

and message_shower() function in "onclick" or "onchange" event of "brand" select tag.
Jul 12 '12 #14
Exequiel
288 256MB
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title> E Vibar </title>
  4. <style type="text/css">
  5. #select 
  6. {
  7. height:28px; width: 150px; margin-right: 0px; color:#153846; font-size: 13px; font-variant: normal; line-height: normal; background: #FFF; margin:5px; text-shadow:1px 1px 1px #FFF;border-radius: 5em 2em; border-radius-topright: 3em; border-radius-topleft: 1em; 9px; border: 1px groove #CCC;  box-shadow: 2px 2px 15px #2F2727;
  8. }
  9.  
  10. #text_field
  11. {
  12. height: 27px; width: 170px; padding: 5px 5px 5px 5px; margin-right: 0px; color:#153846; font-size: 13px; font-variant: normal; line-height: normal; background: #FFF; border: 1px groove #CCC; margin:5px; box-shadow: 2px 2px 15px #2F2727; text-shadow:1px 1px 1px #FFF; border-radius: 5px;
  13. }
  14.  
  15. #content
  16. width:900px; height:200px; text-decoration:none; margin-right:-7px; font-family:"Arial Black", Gadget, sans-serif; color:#FFF; border-bottom:none; border: 1px groove ; text-shadow:2px 2px 8px #CCC; background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727)); background: -webkit-radial-gradient(circle, #FF8000, #FC0); background: -moz-radial-gradient(circle, #EC7600, #FFA851); background: -ms-radial-gradient(circle, #009BE6, #FC0); box-shadow: 2px 2px 15px #999; text-align:center; border-radius: 1em 9em; border-radius-topright: 7em; border-radius-topleft: 1em;
  17. }
  18.     </style>
  19. <script type="text/javascript">
  20. var ii;
  21. var shirt = ["bench","cotton republic"];//option in brand for shirt
  22. var car = ["Toyota","Honda", "Forbes", "Mitsubishi", "Kia", "Nissan"];
  23. var por = ["Mofos.com","Naughty America.com", "Erotica.com"];
  24.  
  25. function ikel()
  26. {    var select_tag = document.ikki.select_tag.value;
  27.     document.ikki.brand.options.length=0;
  28.     document.ikki.tekz.value=null;
  29.  
  30.     if(select_tag=="T-shirt")
  31.     {    
  32.         for( ii=0; ii<shirt.length; ii++)
  33.         {      document.ikki.brand.options[ii]=new Option(shirt[ii], ii);
  34.  
  35.             function callme(){
  36.                 var message=0;
  37.                 message=arguments.length;
  38.                     for(var zx=0; zx<=ii; zx++)
  39.                     {
  40.                         if(zx==ii)
  41.                         {
  42.                             document.ikki.tekz.value="Bench is selected";
  43.                         }
  44.                         else if(zx==ii){
  45.                             document.ikki.tekz.value="Cotton republic is selected";
  46.                         }
  47.                     }//end of for loop for arguments
  48.             }//end of function call me
  49.     callme("Bench is selected", "Cotton republic is selected");//call me function, to be output to textfield
  50.             }//end of loop 
  51.     }//end of if statement T-shirt
  52.  
  53.     if(select_tag=="CARS")
  54.     {    
  55.         for(var ii=0; ii<car.length; ii++)
  56.         {
  57.              document.ikki.brand.options[ii]=new Option(car[ii], ii);
  58.             }//end of for loop
  59.     }//end of if statement Cars
  60.  
  61.     if(select_tag=="Porn Site")
  62.     {
  63.         for(ii=0; ii<por.length; ii++)
  64.         {
  65.              document.ikki.brand.options[ii]=new Option(por[ii], ii);
  66.             }
  67.     }//end of if statement Pron Sites    
  68. }//end of function ikel
  69. window.onload=ikel;
  70. </script>
  71. </head>
  72. <body>
  73. <center>
  74. <br><br>
  75.     <div id="content">
  76.         <br><br>
  77.         <form name="ikki">
  78.             Menu <select name="select_tag"  onclick="ikel()" id="select">
  79.                    <option >T-shirt</option>
  80.                    <option >CARS</option>
  81.                    <option >Porn Site</option> 
  82.                 </select> 
  83.             Brand <select name="brand" spry:choose="ikel()" id="select"><!--option output--></select>         
  84.              <input type="text" name="tekz" id="text_field" disabled  onclick="callme()"/>  
  85.         </form>
  86.     </div>
  87. </center>
  88. </body>
  89. </html>
Jul 13 '12 #15
Exequiel
288 256MB
I created function inside ikel(), its called callme()... I need to output the values of call me individualy to the textfield... for example... if I selected bench in the select tag the output must be Bench is selected . . . I dont know how to determine if how to select bench to output the Bench is selected inside the for loop and if/else if statement... its so confusing . . . :) thanks again for your response... :)
Jul 13 '12 #16
ariful alam
185 100+
In your code you created a function named callme() inside the ikel() function that takes no parameter. but when you called the callme() function inside the ikel() function that takes parameter. whenever a few funcions with the same name with different parameter, those do not treat equal. because those are different. so, answer will not happen or error throwed.

moreover, in your page, you require text box to show a message whenever you select a option from select_tag or from brand. so, you need a common function that can used in those two select tag. for this, it is better to use a single function in your code. i changed a little bit in your code. check the following.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title> E Vibar </title>
  4.  
  5. <style type="text/css">
  6. #select{
  7. height:28px; width: 150px; margin-right: 0px; color:#153846; font-size: 13px; font-variant: normal; line-height: normal; background: #FFF; margin:5px; text-shadow:1px 1px 1px #FFF;border-radius: 5em 2em; border-radius-topright: 3em; border-radius-topleft: 1em; 9px; border: 1px groove #CCC;  box-shadow: 2px 2px 15px #2F2727;
  8. }
  9.  
  10. #text_field{
  11. height: 27px; width: 170px; padding: 5px 5px 5px 5px; margin-right: 0px; color:#153846; font-size: 13px; font-variant: normal; line-height: normal; background: #FFF; border: 1px groove #CCC; margin:5px; box-shadow: 2px 2px 15px #2F2727; text-shadow:1px 1px 1px #FFF; border-radius: 5px;
  12. }
  13.  
  14. #content{
  15. width:900px; height:200px; text-decoration:none; margin-right:-7px; font-family:"Arial Black", Gadget, sans-serif; color:#FFF; border-bottom:none; border: 1px groove ; text-shadow:2px 2px 8px #CCC; background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727)); background: -webkit-radial-gradient(circle, #FF8000, #FC0); background: -moz-radial-gradient(circle, #EC7600, #FFA851); background: -ms-radial-gradient(circle, #009BE6, #FC0); box-shadow: 2px 2px 15px #999; text-align:center; border-radius: 1em 9em; border-radius-topright: 7em; border-radius-topleft: 1em;
  16. }
  17. </style>
  18.  
  19. <script type="text/javascript">
  20.     var ii;
  21.     var shirt = ["bench","cotton republic"];//option in brand for shirt
  22.     var car = ["Toyota","Honda", "Forbes", "Mitsubishi", "Kia", "Nissan"];
  23.     var por = ["Mofos.com","Naughty America.com", "Erotica.com"];
  24.  
  25.     function ikel()    {
  26.         var select_tag = document.ikki.select_tag.value;
  27.         document.ikki.brand.options.length=0;
  28.         document.ikki.tekz.value=null;
  29.  
  30.         if(select_tag=="T-shirt") {
  31.             for( ii=0; ii<shirt.length; ii++) {
  32.                 document.ikki.brand.options[ii]=new Option(shirt[ii]);
  33.             }//end of for loop
  34.         }//end of if statement T-shirt
  35.  
  36.         if(select_tag=="CARS") {
  37.             for(var ii=0; ii<car.length; ii++) {
  38.                  document.ikki.brand.options[ii]=new Option(car[ii]);
  39.             }//end of for loop
  40.         }//end of if statement Cars
  41.  
  42.         if(select_tag=="Porn Site") {
  43.             for(ii=0; ii<por.length; ii++) {
  44.                  document.ikki.brand.options[ii]=new Option(por[ii]);
  45.             }
  46.         }//end of if statement Pron Sites
  47.  
  48.         text_changer();
  49.  
  50.     }//end of function ikel
  51.  
  52.     function text_changer()    {
  53.         document.ikki.tekz.value=document.ikki.brand.value + " is selected";
  54.     }
  55.     window.onload=ikel;
  56. </script>
  57.  
  58. </head>
  59.  
  60. <body>
  61. <center>
  62. <br><br>
  63.     <div id="content">
  64.         <br><br>
  65.         <form name="ikki">
  66.             Menu <select name="select_tag"  onclick="ikel()" id="select">
  67.                    <option >T-shirt</option>
  68.                    <option >CARS</option>
  69.                    <option >Porn Site</option>
  70.                 </select>
  71.             Brand <select name="brand" id="select" onchange="text_changer();"><!--option output--></select>
  72.              <input type="text" name="tekz" id="text_field" disabled>
  73.         </form>
  74.     </div>
  75. </center>
  76. </body>
  77. </html>
Jul 14 '12 #17
Exequiel
288 256MB
ah... I see... hehe... thank you very much for your codes.... I know that this problem that I've posted here is so easy for you and for others,,, hehe... I'm just a Beginner in java script,,, thank you very much... :) you helped me so much ariful alam... :)
Jul 17 '12 #18
ariful alam
185 100+
you are most Welcome :D
Jul 17 '12 #19

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

Similar topics

1
by: Dom Nicholas | last post by:
Hi, I have a table (inside a form) that is dynamically created ie the user can add / remove rows dynamically. Each table row has 4 columns : a selection pull down list a text field for...
13
by: Stumped and Confused | last post by:
Hello, I really, really, need some help here - I've spent hours trying to find a solution. In a nutshell, I'm trying to have a user input a value in form's textfield. The value should then be...
3
by: Santosh | last post by:
Hi, I have a requirement in which, I need to capture a loan amount and the amount of down payment for that loan. According to the requirement, the user is going to enter enter the loan amount and...
0
by: Peter S | last post by:
Hi: I am trying to read a SQL Server text field (Access memo field) using connection.OpenRecordSet("qry with text field") rather than database.OpenRecordSet("qry with text field")
5
by: Abhishek | last post by:
Hi this is my another validator in javascript to validate the Phone Number :-) <script language='javascript'> function funcCheckPhoneNumber(ctrtxtMobile,e){ if(window.event){ var strkeyIE =...
0
by: baburmm | last post by:
hello friends i want to get the footer row textbox value of the gridview using javascript for validating it. how can i get it is there any coding pls help me Thanks in advance, Regards. Babu.K
1
by: baburmm | last post by:
hello friends i want to get the footer row textbox value of the gridview using javascript for validating it. how can i get it is there any coding pls help me Thanks in advance, Regards. Babu.K
16
by: kirankumarn | last post by:
I want to read xml which is stored in hidden field using javascript
2
by: dev saini | last post by:
how to remove number one by one in the calculator text box using JavaScript. its urgent
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

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.