Solved

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

Posted on 2010-11-17
6
395 Views
Last Modified: 2012-08-14
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
0
Comment
Question by:SysAdmin1030
  • 3
  • 3
6 Comments
 
LVL 16

Expert Comment

by:jmatix
ID: 34159232
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
 

Author Comment

by:SysAdmin1030
ID: 34160268
That didn't seem to work...any ideas?
0
 
LVL 16

Expert Comment

by:jmatix
ID: 34160607
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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:SysAdmin1030
ID: 34165864
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
 

Author Comment

by:SysAdmin1030
ID: 34175569
Oh and I caught the typo previously and that wasn't the cause of my issue.
0
 
LVL 16

Accepted Solution

by:
jmatix earned 500 total points
ID: 34188867
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

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

805 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question