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

Collapse
X
Collapse
 
  • Page of 2
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • Exequiel
    Contributor
    • Jul 2012
    • 288
    #1

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

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

function ikel(){
	
	var sel = document.ikki.sel.value;
	
	 var les = document.getElementById("les");
	 
		
		if(sel=="ikki"){
				les.innerHTML = "ikki selected";
			
			}
			else if(sel=="zick"){
					les.innerHTML = "zick selected";
				}
			else if(sel=="ikel"){
					les.innerHTML = "ikel selected";
				}				
}
</script>
</head>

<body bgcolor="#999999">
	<center>
    <form name="ikki" >
   
    	<table>
        	<tr>
            	<td>
            	<select onchange="ikel()" name="sel">
                	<option onchange="ikel()" name="sele">ikki</option>
                    <option onchange="ikel()" name="sele">zick</option>
                    <option onchange="ikel()" name="sele">ikel</option>
                </select>
                </td>
            </tr>
        </table>
         result=<font color="#990000"><span class="result" id="les" spry:content="ikel()"></span></font><br>
   				<input type="text" name="put" id="les" onchange="ikel()">
                <br>     
      
    	
    
	</form>
    <!--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-->
    </center>
    <center>
    
    </center>
</body>
</html>
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      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).

        Comment

        • Exequiel
          Contributor
          • Jul 2012
          • 288
          #3
          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 :)

            Comment

            • ariful alam
              New Member
              • Jan 2011
              • 185
              #4
              Are you trying this:
              Code:
              <html>

<head>
	<script language='javascript' type='text/javascript'>
		function changer()
		{
			document.getElementById('txt_box').value=document.getElementById('sel_box').options[document.getElementById('sel_box').selectedIndex].value;//Value;
		}
	</script>
</head>

<body>

	<select id='sel_box' onchange='javascript:changer();'>
		<option>orange</option>
		<option>white</option>
		<option>red</option>
		<option>green</option>
	</select>

	<input id='txt_box' type='text' value='message' size='50'/>

</body>
</html>

                Comment

                • Dormilich
                  Recognized Expert Expert
                  • Aug 2008
                  • 8694
                  #5
                  make that document.getEle mentById('txt_b ox').value = document.getEle mentById('sel_b ox').value;, the value attribute for the <option>s has not been set.

                    Comment

                    • ariful alam
                      New Member
                      • Jan 2011
                      • 185
                      #6
                      The outputs are similar.

                        Comment

                        • Exequiel
                          Contributor
                          • Jul 2012
                          • 288
                          #7
                          thank you ariful alam, but i need to output the value of select tag to textbox using if/else if statement...
                          Code:
                           if(sel=="ikki"){
                les.innerHTML = "ikki selected";
 
            }
            else if(sel=="zick"){
                    les.innerHTML = "zick selected";
                }
            else if(sel=="ikel"){
                    les.innerHTML = "ikel selected";
                }
                          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 :)

                            Comment

                            • Exequiel
                              Contributor
                              • Jul 2012
                              • 288
                              #8
                              I've got it !.... thank you for some sample codes that you made...

                              Code:
                               
<html>
 
<head>
    <script language='javascript' type='text/javascript'>
      
function ikel()
{
	
	var sel = document.ikki.sel.value;
	
	if(sel=="Zick")
			{
	 document.getElementById('txt_box').value=document.getElementById('select_tag').options[document.getElementById('select_tag').selectedIndex].value="Zick is Emo!";
			}
	if(sel=="Ikel")
			{
	 document.getElementById('txt_box').value=document.getElementById('select_tag').options[document.getElementById('select_tag').selectedIndex].value="Ikel is Handsome!";
			}
	if(sel=="Ikki")
			{
	 document.getElementById('txt_box').value=document.getElementById('select_tag').options[document.getElementById('select_tag').selectedIndex].value="Ikki is naughty!";
			}
}
    </script>
</head>
 
<body>
 <form name="ikki">
 
    <select id="select_tag" onchange="ikel()" name="sel">
        <option>Zick</option>
        <option>Ikel</option>
        <option>Ikki</option>
    </select>
 
    <input id='txt_box' type='text' value='select to select tag' onchange="ikel()"/>
 </form>
</body>
</html>
                              thats my code to out put the value of select tag to textfield using if statement... hehe... thank you for some response... salamat..

                                Comment

                                • ariful alam
                                  New Member
                                  • Jan 2011
                                  • 185
                                  #9
                                  @Exequiel

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

                                  Code:
                                  document.getElementById('txt_box').value=document.getElementById('select_tag').options[document.getElementById('select_tag').selectedIndex].value="Message is here";
                                  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:

                                  Code:
                                  document.getElementById('txt_box').value="Message is here.";
                                  Hope you understand. :)
                                  Last edited by ariful alam; Jul 9 '12, 06:25 PM. Reason: spelling mistake of words.

                                    Comment

                                    • Exequiel
                                      Contributor
                                      • Jul 2012
                                      • 288
                                      #10
                                      Thank you for your codes Mr. ariful alam... :)

                                        Comment

                                        • ariful alam
                                          New Member
                                          • Jan 2011
                                          • 185
                                          #11
                                          You are most welcome, Exequiel. :)

                                            Comment

                                            • Exequiel
                                              Contributor
                                              • Jul 2012
                                              • 288
                                              #12
                                              Code:
                                              <html>
<head>
<title>E Vibar</title>
<script type="text/javascript">
function ikel()
{
	var sel = document.ikki.sel.value;
	if(sel=="T-shirt")
	{	
			document.ikki.brand.options.length=0;
			document.ikki.tekz.value=null;
		var shirt = ["bench","cotton republic"];
		var shirt_len=shirt.length;
		for(var ii=0; ii<shirt_len; ii++)
		{
 			document.ikki.brand.options[ii]=new Option(shirt[ii], ii);	
				if(shirt[ii]=="bench")
				{
					document.ikki.tekz.value="Bench is Selected";
				}
				else if(shirt[ii]=="cotton republic")
				{
					document.ikki.tekz.value="Cotton Republic is selected";
				}
   		 } 
	}//end of if statement T-shirt
	
	if(sel=="CARS")
	{	
		var car = ["Toyota","Honda", "Forbes", "Mitsubishi", "Kia", "Nissan"];
		var car_len=car.length;
		var cc=0;
			document.ikki.brand.options.length=0;
			document.ikki.tekz.value=null;
		for(var cc=0; cc<car_len; cc++)
		{
 			document.ikki.brand.options[cc]=new Option(car[cc], cc);			
   		 }
	}//end of if statement Cars
	
	if(sel=="Porn Site")
	{	 
		var por = ["Mofos.com","Naughty America.com", "Erotica.com"];
		var por_len=por.length;
		var xx=0;
			document.ikki.brand.options.length=0;
			document.ikki.tekz.value=null;
		for(var xx=0; xx<por_len; xx++)
		{
 			document.ikki.brand.options[xx]=new Option(por[xx], xx);			
   		 }
	}//end of if statement Pron Sites	
}//end of function ikel
window.onload=ikel;
</script>
</head>
<body>
<form name="ikki">
		Menu <select name="sel"  onclick="ikel()" id="selected" >
                   <option >T-shirt</option>
                   <option >CARS</option>
                   <option >Porn Site</option> 
             </select> 
        Brand <select name="brand" ><!--option output--></select> 		
             <input type="text" name="tekz" id="tikz" onchange="ikel()"/>  
</form>
</body>
</html>

                                                Comment

                                                • Exequiel
                                                  Contributor
                                                  • Jul 2012
                                                  • 288
                                                  #13
                                                  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 :)

                                                    Comment

                                                    • ariful alam
                                                      New Member
                                                      • Jan 2011
                                                      • 185
                                                      #14
                                                      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.

                                                        Comment

                                                        • Exequiel
                                                          Contributor
                                                          • Jul 2012
                                                          • 288
                                                          #15
                                                          Code:
                                                          <html>
<head>
<title> E Vibar </title>
<style type="text/css">
#select 
{
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;
}

#text_field
{
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;
}

#content
{ 
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;
}
	</style>
<script type="text/javascript">
var ii;
var shirt = ["bench","cotton republic"];//option in brand for shirt
var car = ["Toyota","Honda", "Forbes", "Mitsubishi", "Kia", "Nissan"];
var por = ["Mofos.com","Naughty America.com", "Erotica.com"];
	
function ikel()
{	var select_tag = document.ikki.select_tag.value;
	document.ikki.brand.options.length=0;
	document.ikki.tekz.value=null;

	if(select_tag=="T-shirt")
	{	
		for( ii=0; ii<shirt.length; ii++)
		{  	document.ikki.brand.options[ii]=new Option(shirt[ii], ii);
			
			function callme(){
				var message=0;
				message=arguments.length;
					for(var zx=0; zx<=ii; zx++)
					{
						if(zx==ii)
						{
							document.ikki.tekz.value="Bench is selected";
						}
						else if(zx==ii){
							document.ikki.tekz.value="Cotton republic is selected";
						}
					}//end of for loop for arguments
			}//end of function call me
	callme("Bench is selected", "Cotton republic is selected");//call me function, to be output to textfield
   		 }//end of loop 
	}//end of if statement T-shirt
	
	if(select_tag=="CARS")
	{	
		for(var ii=0; ii<car.length; ii++)
		{
 			document.ikki.brand.options[ii]=new Option(car[ii], ii);
   		 }//end of for loop
	}//end of if statement Cars

	if(select_tag=="Porn Site")
	{
		for(ii=0; ii<por.length; ii++)
		{
 			document.ikki.brand.options[ii]=new Option(por[ii], ii);
   		 }
	}//end of if statement Pron Sites	
}//end of function ikel
window.onload=ikel;
</script>
</head>
<body>
<center>
<br><br>
	<div id="content">
		<br><br>
		<form name="ikki">
			Menu <select name="select_tag"  onclick="ikel()" id="select">
                   <option >T-shirt</option>
                   <option >CARS</option>
                   <option >Porn Site</option> 
				</select> 
			Brand <select name="brand" spry:choose="ikel()" id="select"><!--option output--></select> 		
             <input type="text" name="tekz" id="text_field" disabled  onclick="callme()"/>  
		</form>
	</div>
</center>
</body>
</html>
                                                          Last edited by Exequiel; Jul 13 '12, 06:36 AM. Reason: minimize my codes and with css design . . :)

                                                            Comment

                                                            Previous 1 2 template Next
                                                            Working...