asked on

Fill out a text box by selecting an item from drop down menu

I want to select an item from drop down menu to fill a text box.
If user doesn't find an appropriate selection from drop down menu then I want user to enter free text in the text box.
Please send me the solution or help me to fix this problem

<HTML>
<HEAD>
<TITLE></TITLE>
<script>
var select2Options = new Array(
            new Array(/* options for Fred*/
                  new Array(/*text*/'bam bam', /*value*/'1.asp'),
                  new Array('zzz', '2.asp')
                  ),
            new Array(/* options for Barney*/
                  new Array('vvv', '3.asp'),
                  new Array('bbb', '4.asp')
                  )
);
function updateSelection()
{
      select1Obj = document.getElementById("s1");      
      select2Obj = document.getElementById("s2");      
      selectedIndex = select1Obj.selectedIndex;
      optionsArray = select2Options[selectedIndex];
 
      for (i = 0; i < optionsArray.length; i++)
      {
            optionText = optionsArray[i][0];
            optionValue = optionsArray[i][1];
            select2Obj.options[i] = new Option(optionText, optionValue);
      }      
}
</script>
</HEAD>
<BODY>
<form id="f1" name="f1" >
      <select name="s1" id="s1" onChange="updateSelection()"> 
            <option name="s1" id="s1" value="Fred">Fred</option>
            <option name="s1" id="s1" value="Barney">Barney</option>
			<option name="s1" id="s1" value="Fred">Jeff</option>
            <option name="s1" id="s1" value="Barney">Docker</option>
			
	  <option name="s1" id="s1" value="Fred">I don't find the item in the lsit</option>
	  
      </select>
           <input type="text" size="20" name="s2" id="s2"> 
      
	   <input type="submit" value="please submit form">
</form>
</BODY>
</HTML>

Open in new window

fourice

I'm not sure what you want to do with:
for (i = 0; i < optionsArray.length; i++)
{
optionText = optionsArray[i][0];
optionValue = optionsArray[i][1];
select2Obj.options[i] = new Option(optionText, optionValue);
}
But try this:

<HTML>
<HEAD>
<TITLE></TITLE>
<script>
var select2Options = new Array(
            new Array(/* options for Fred*/
                  new Array(/*text*/'bam bam', /*value*/'1.asp'),
                  new Array('zzz', '2.asp')
                  ),
            new Array(/* options for Barney*/
                  new Array('vvv', '3.asp'),
                  new Array('bbb', '4.asp')
                  )
);
function updateSelection()
{
      select1Obj = document.getElementById("s1");
      selectedIndex = select1Obj.selectedIndex;
      aValue = select1Obj.options[selectedIndex].value
 
      if(aValue=="manual")
      {
      	document.getElementById('textBoxDiv').style.visibility='';
      }
      else
      {
      	document.getElementById('s2').value="";
      	document.getElementById('textBoxDiv').style.visibility='hidden';
      }
}
</script>
</HEAD>
<BODY>
<form id="f1" name="f1">
	<select name="s1" id="s1" onChange="updateSelection()">
		<option value="Fred">Fred</option>
		<option value="Barney">Barney</option>
		<option value="Jeff">Jeff</option>
		<option value="Docker">Docker</option>
		<option value="manual">I don't find the item in the list</option>
	</select>
	<div id="textBoxDiv" style="visibility:hidden">
		<input type="text" size="20" name="s2" id="s2">
	</div>
	<input type="submit" value="please submit form">
</form>
</BODY>
</HTML>

Open in new window

ASKER CERTIFIED SOLUTION

Tomarse111

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michel Plungjan

why mix access?

function updateSelection(sel) {
  var selIndex = sel.selectedIndex;
  var theForm = sel.form;
  theForm['s2'].value = sel.options[selIndex].text;
  if (sel.selectedIndex==sel.options.length-1) {
    theForm['s2'].disabled = false;
    theForm['s2'].select();
    theForm['s2'].focus();
  }
  else theForm['s2'].disabled = true;
}

Open in new window

Tomarse111

How do you mean mix access sorry mplungian?

Michel Plungjan

If you pass a form object, use form access, if not use DOM, but I find that this construct bothers my eyes:

var selIndex = sel.selectedIndex;
document.getElementById('s2').value = sel.options[selIndex].text;

instead of

var selIndex = sel.selectedIndex;
sel.form['s2'].value = sel.options[selIndex].text;

Tomarse111

Ahhh i understand now. Sorry for that, should of really re read my answer before posting.

and to be honest I didn't realise you could reference a form element in this way:

sel.form['s2'];

Thank you though, I'll try and stick to the same methods in future :)

Michel Plungjan

No points to anyone else?