Filling out form from drop down menu

Hello.

How can the following be adjusted so that when you click on an option in the top menu, the form at the bottom is automatically filled out?

Thanks for the help!



//////////////////////////////////



<script type="text/javascript" src="http://www.php-development.ru/javascripts/dropdown/dropdown.js"></script>

<div>
<div id="menu_parent"
     style="width: 150px; border: 1px solid black; background: #FFFFEE; padding: 0px 5px;
            color: #008000;">
Select One
</div>
<div id="menu_child" style="position: absolute; visibility: hidden; background: #FFFFEE;">
<a style="display: block; width: 300px; border: 1px solid black; padding: 0px 5px; text-decoration: none; color: #0000C0;" href="#">Title: Page 1 - URL: page1.html</a>
<a style="display: block; width: 300px; border: 1px solid black; padding: 0px 5px; text-decoration: none; color: #0000C0;" href="#">Title: Page 2 - URL: page2.html</a>
<a style="display: block; width: 300px; border: 1px solid black; padding: 0px 5px; text-decoration: none; color: #0000C0;" href="#">Title: Page 3 - URL: page3.html</a>
</div>
<script type="text/javascript">
at_attach("menu_parent", "menu_child", "hover", "y", "pointer");
</script>
</div>

<script type="text/javascript">
at_attach("menu_parent", "menu_child", "hover", "y", "pointer");
</script>

<form action="process.php" method="post">
           Title: <input type="text" name="menu_title" value=""> <br>
           URL: <input type="text" name="menu_url" value=""> <br>
<input type=submit>
</table>
</form>
LVL 16
hankknightAsked:
Who is Participating?
 
ZvonkoConnect With a Mentor Systems architectCommented:
Like this:

<script type="text/javascript" src="dropdown.js"></script>
<style>
#menu_child a {
  display: block;
  width: 300px;
  border: 1px solid black;
  padding: 0px 5px;
  text-decoration: none;
  color: #0000C0;
}
</style>
<script>
function clickLink(theLink){
  var theForm=document.forms[0];
  theForm.menu_title.value=theLink.innerHTML;
  theForm.menu_url.value=theLink.href;
  return false;
}
</script>
<div>
<div id="menu_parent"
     style="width: 150px; border: 1px solid black; background: #FFFFEE; padding: 0px 5px;
            color: #008000;">
Select One
</div>
<div id="menu_child" style="position: absolute; visibility: hidden; background: #FFFFEE;">
<a href="page1.html" onClick="return clickLink(this)">Page 1</a>
<a href="page2.html" onClick="return clickLink(this)">Page 2</a>
<a href="page3.html" onClick="return clickLink(this)">Page 3</a>
</div>
<script type="text/javascript">
at_attach("menu_parent", "menu_child", "hover", "y", "pointer");
</script>
</div>
<br><br><br><br><br><br><br>

<form action="process.php" method="post">
          Title: <input type="text" name="menu_title" value=""> <br>
          URL: <input type="text" name="menu_url" value=""> <br>
<input type=submit>
</table>
</form>


0
 
hankknightAuthor Commented:
Thanks!
0
 
ZvonkoSystems architectCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.