Changing Form Submit E-mail Address based on Drop Down Selection

I'm attempting to set-up a form to submit to a different e-mail address depending on the selection from the drop down menu.

The drop down code looks like this:

<select class="drop-field" name="Directed" id="Directed">
<option></option>
<option value="example@example.com">Guest Room & Suite information </option>
<option value="example@example.com">About Your Stay </option>
<option value="example@example.com">Group Sales & Catering</option>
<option value="example@example.com">Job Inquiries & Careers </option>
<option value="example@example.com">Lost & Found </option>
<option value="example@example.com">Other</option>
 </select>

Open in new window


The javascript looks like this:

<script type="text/javascript">								 
form.hdwemail.value = document.getElementById("Directed").options[document.getElementById("Directed").selectedIndex].value;
</script>

Open in new window


And the submit code looks like this:

<input type="hidden" name="hdwuploadfolder" id="hdwuploadfolder" value="uploads" />
<input type="hidden" name="hdwemail" id="hdwemail" value="" />
<input type="hidden" name="hdwok" id="hdwok" value="http://www.mayfieldinnedmonton.com/contact-ok.aspx" />
<input type="hidden" name="hdwnook" id="hdwnook" value="http://www.mayfieldinnedmonton.com/contact-error.aspx" />

Open in new window


In the end I'm trying to get the value of hdwemail to change to a different e-mail address depending on the drop down selection.

Any help would be appreciated.

Thank you
SysAdmin1030Asked:
Who is Participating?
 
Justin MathewsConnect With a Mentor Commented:
Change the line:

<select class="drop-field" name="Directed" id="Directed" onchange="selChanged(sel)">

To:

<select class="drop-field" name="Directed" id="Directed" onchange="selChanged(this)">

0
 
Justin MathewsCommented:
Add an onchange event handler to select as:

<select class="drop-field" name="Directed" id="Directed" onchange="selChanged(this)">
<option></option>
<option value="example@example.com">Guest Room & Suite information </option>
<option value="example@example.com">About Your Stay </option>
<option value="example@example.com">Group Sales & Catering</option>
<option value="example@example.com">Job Inquiries & Careers </option>
<option value="example@example.com">Lost & Found </option>
<option value="example@example.com">Other</option>
 </select>

Then define JS function selChanged() as below:

<script>
function selChanged(sel)
{
 sel.frm.hdwemail.value = sel.options[sel.selectedIndex].value;
}
</script>

Open in new window

0
 
SysAdmin1030Author Commented:
That didn't seem to work...any ideas?
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Justin MathewsCommented:
Sorry there was a typo - frm instead of form. Correct as below:
<script>
function selChanged(sel)
{
 sel.form.hdwemail.value = sel.options[sel.selectedIndex].value;
}
</script>

Open in new window

0
 
SysAdmin1030Author Commented:
It is obviously an issue with my code or the placement of my <script> because your  handler makes perfect sense.

I have placed the entire form code below let me know if you see anything that could be causing the issue; I appreciate all your help!

<form action="http://www.example.com/HDWASPForm2Excel/Form2Excel.asp" method="post" accept-charset="iso-8859-1">
<table id="contact-table" width="100%" border="0" cellspacing="0" cellpadding="0">
                                  <tr>
                                   <td class="form-title">*Name:</td>
                                   <td><input class="text-field" name="Name" type="text" maxlength="50" /></td>
                                  </tr>
                                  <tr>
                                   <td class="form-title">*Email:</td>
                                   <td><input class="text-field" name="Email" type="text" maxlength="50" /></td>
                                  </tr>
                                  <tr>
                                   <td class="form-title">Phone:</td>
                                   <td><input class="text-field" name="Phone" type="text" maxlength="50" /></td>
                                  </tr>
                                  <tr>
                                    <td class="form-title">Directed To:</td>
                                    <td><select class="drop-field" name="Directed" id="Directed" onchange="selChanged(sel)">
                                    <option></option>
                                    <option value="example@example.com">Guest Room & Suite information </option>
                                    <option value="example@example.com">About Your Stay </option>
                                    <option value="example@example.com">Group Sales & Catering</option>
                                    <option value="example@example.com">Job Inquiries & Careers </option>
                                    <option value="example@example.com">Lost & Found </option>
                                    <option value="example@example.com">Other</option>
                                    </select></td>
                                  </tr>
                                  <tr>
                                   <td class="form-title top">Comments:</td>
                                   <td><textarea name="Comments" class="box-field" cols="" rows=""></textarea></td>
                                  </tr>
                                  <tr>
                                   <td class="form-title top">&nbsp;</td>
                                   <td><button id="btn-send" type="submit"></button></td>
                                  </tr>
                                  <tr>
                                   <td class="form-title top">&nbsp;</td>
                                   <td><span class="small-quote">*required fields</span></td>
                                  </tr>
                                 </table>
                                 
                                 <script>
				 function selChanged(sel)
				 {
				 sel.form.hdwemail.value = sel.options[sel.selectedIndex].value;
				 }
				 </script>
                                 
                                 <input type="hidden" name="hdwuploadfolder" id="hdwuploadfolder" value="uploads" />
                                 <input type="hidden" name="hdwemail" id="hdwemail" value="" />
                                 <input type="hidden" name="hdwok" id="hdwok" value="http://www.example.com/contact-ok.aspx" />
                                 <input type="hidden" name="hdwnook" id="hdwnook" value="http://www.example.com/contact-error.aspx" />
                                </form>

Open in new window

0
 
SysAdmin1030Author Commented:
Oh and I caught the typo previously and that wasn't the cause of my issue.
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.