Picture Link to Fill Form

[RoadKill]

Hello,

I have what I hope is a fairly simple question on my form, which is attached
below. What I would like is to have a picture of a person that when clicked
will fill in the name of the Coach (coachname) on this form. Right now I just
have it as John Doe in the drop down field. We would have about 20 coaches
for the person to select from.

How do I go about setting that up?



<div align="left">
<table border="0" cellpadding="2" style="border-collapse: collapse"
width="599" id="table1">


<tr>
<td>
<form method="POST" action="survey_submit.asp" name="newhire"
onSubmit="return validateForm(newhire);">
<table border="0" cellpadding="5" style="border-collapse: collapse"
width="100%" id="table2">
<tr>
<td colspan="2">Your Name (optional):
<input type="text" name="nhname" size="25"></td>
</tr>
<tr>
<td colspan="2">Your Coach: <select size="1" name="coachname">
<option value="" selected>- Select Trainer -</option>
<option value="Coach1">Coach1</option>
<option value="Coach2">Coach2</option>
<option value="Coach3">Coach3</option>
</select></td>
<input type="hidden" name="coachname" value="John Doe">
</tr>
<tr>
<td colspan="2"><input type="radio" value="Phase 2" name="phase">Phase
2:
<br><br>
<input type="radio" name="phase" value="Phase 3">Phase 3:
<br> </td>
</tr>
<tr>
<td colspan="2">Class Start Date: <input type="text" name="DateStart"
size=10>
<font face="Arial"><a href="javascript:cal1.popup();"><img
src="../cal/cal.gif" width="20" height="21" border="0" alt="Choose a
date."></a></font></td>
</tr>
<tr>
<td colspan="2">Trainer:
<select size="1" name="trainer">
<option value="" selected>- Select Trainer -</option>
<option value="Trainer1">Trainer1</option>
<option value="Trainer2">Trainer2</option>
<option value="Trainer3">Trainer3</option>
</select></td>
</tr>
<tr><td colspan="2" align="center"><b>Please Rate the following
Statements Below Using the Following Key:</b></td></tr>
<tr><td colspan="2" align="center"><b>1 = <i>Strongly Disagree</i>
</b>|<b> 2 = <i>
Disagree</i> </b>|<b> 3 = <i>Agree</i> </b>|<b> 4 = <i>Strongly
Agree</i></b></td></tr>
<tr><td>1. </td>
<td><input type="radio" name="Q1" value="Strongly Disagree"> 1 <input
type="radio" name="Q1" value="Disagree"> 2
<input type="radio" name="Q1" value="Agree"> 3 <input type="radio"
name="Q1" value="Strongly Agree"> 4</td></tr>
<tr><td>2. </td>
<td><input type="radio" name="Q2" value="Strongly Disagree"> 1 <input
type="radio" name="Q2" value="Disagree"> 2
<input type="radio" name="Q2" value="Agree"> 3 <input type="radio"
name="Q2" value="Strongly Agree"> 4</td></tr>
<tr><td>3. </td>
<td><input type="radio" name="Q3" value="Strongly Disagree"> 1 <input
type="radio" name="Q3" value="Disagree"> 2
<input type="radio" name="Q3" value="Agree"> 3 <input type="radio"
name="Q3" value="Strongly Agree"> 4</td></tr>
<tr><td>4. </td>
<td><input type="radio" name="Q4" value="Strongly Disagree"> 1 <input
type="radio" name="Q4" value="Disagree"> 2
<input type="radio" name="Q4" value="Agree"> 3 <input type="radio"
name="Q4" value="Strongly Agree"> 4</td></tr>
<tr><td width="70%">5. </td>
<td width="30%"><input type="radio" name="Q5" value="Yes"> Yes <input
type="radio" name="Q5" value="No"> No</td></tr>
<tr><td colspan="2">Comments:<br>
<textarea name="comments" cols="75" rows="10"></textarea></td></tr>
</table>
<p align="center">
<input type="submit" value="Submit" name="Submit"> <input type="reset"
value="Reset" name="Reset"></p>
</form>
<script language="JavaScript">
var cal1 = new calendar2(document.forms['newhire'].elements['DateStart']);
cal1.year_scroll = true;
</script>

<p> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>