use JS to copy a selected <option> to an <input> field in separate <div>?

[ginerjm]

I'm new to php and js but have been pgming for 30+ years so I kinda know what I'm doing.  I'm also new to this forum.

 

I've got an html page that my PHP code built for me - two divs in play here.  One contains a <form> with some fields, the other has a <select> list of text lines (<option>) which I want to let the user scroll thru and click on one of them and have that text copied to one of the <input> objects in the other div.  Pretty simple huh?

 

Here's the PHP line that created the html code in the <select> object:

echo '<select id="curdirs" onclick="displayResult()" size="8">';

This is followed with a loop that puts out several <option> elements from a query.  This is all good and works for me.

 

The js function is :

 

<script type="text/javascript">

function displayResult()

{

var x=document.getElementById("curdirs").selectedIndex;

var y=document.getElementById("curdirs").options;

alert("selected "+ y[x].text);

try

  {

    document.getElementById("thisform.uid").innerHTML=y[x].text;

  }

catch(err)

  {

  txt="There was an error on this page.\n\n";

  txt+="Error description: " + err.description + "\n\n";

  txt+="Click OK to continue.\n\n";

  alert(txt);

  }

}

</script>

 

The function correctly grabs the selected index number from the click in the drop-down; it correctly determines the text value that was selected by the user; these I see in the first alert command.  Good so far.

 

The function fails when I try to place the selected text into my <input> field.  I've tinkered with this command by appending the <form> name to the <input> name, but neither way works.  Same error.  The second alert displays the text and includes the following as a result of the call to "err.description":

 

'document.getElementById(...)' is null or not an object.

 

Now - I lifted this Js code from a tutorial online and thought I could make it do what I wanted.  Apparently there's more to placing some text into an <input> than I'm aware of.  Can someone point me in the right direction?

[ginerjm]

Eureka!

 

Solved it after reviewin about 4 pages of this forum's posts and discovering some different properties to experiment with.

 

Here's the function that works (it takes a choice from a dropdown menu and places it in a type="text" field).

 

function displayResult()

{

var x=document.getElementById("curdirs").selectedIndex;

var y=document.getElementById("curdirs").options;

try

  {

    document.getElementById("uid").value =y[x].text;

  }

catch(err)

  {

  txt="There was an error on this page.\n\n";

  txt+="Error description: " + err.description + "\n\n";

  txt+="Click OK to continue.\n\n";

  alert(txt);

  }

 

Now it's on to placing the cursor into the next field.

[kenrbnsn]

When posting code to this forum, please place your code between

tags.

 

Ken