Forum Moderators: open
I need to create an html form that will send to a particular email address based on which department is selected in the drop down box. Does anyone know of a javascript function that will dynamically switch the email based on what's selected? How do I integrate the function into the form code?
Here's the code.
<html>
<head>
</head>
<body>
<FORM name="myform">
<select name="operation">
<option value="cs@example.com">customer service</option>
<option value="pr@example-2.com">public relations</option>
<option value="it@example-3.com">IT</option>
</select>
<input name = "body" type="text">
<input type="submit">
</form>
</body>
</html>
thanks
This should not be a JavaScript issue, but a job for your server-side form to email script (PHP, Perl, ASP or whatever). All the form does is send a load of information to your server-side script, which then decides who the information should be sent to based on the users response. No direct manipulation of the form with JavaScript should be necessary.
Unless.... you are considering using the mailto: link in your forms action attribute? But this is not recommended!
<head>
<script>
function formProcess(form)
{
var select = form.operation
form.action = "mailto:"+select.options[select.selectedIndex].value;
alert(form.action)
// do validation (?)
// ...
// return false, if invalid
return true;
}
</script>
</head>
<body>
<form method="post" enctype="text/plain" onsubmit="return formProcess(this)">
<select action="mailto:cs@example.com" name="operation">
<option value="cs@example.com">customer service</option>
<option value="pr@example.2.com">public relations</option>
<option value="it@example.3.com">IT</option>
</select>
<input name = "body" type="text">
<input type="submit">
</form>
Would it be possible to do this with radio buttons or would it have to be a drop-down menu? I am trying it with radio buttons, but it isn't working.
Again, thanks for the help.
<script>
function formProcess(form)
{
/* More than 1 elm with name, so a collection is returned */
var elms = form.elements.addr, selected;
for(var k=-1, elm; elm=elms[++k];){
if(elm.checked)
selected = elm;
}
/* If selected remains undefined (ie no selection made) */
if(!selected)
alert("Please select department");
return false;
}
/* Else set action; allow submit */
form.action = "mailto:"+select.options[select.selectedIndex].value;
return true;
}
</script>
</head>
<body>
<form method="post" enctype="text/plain" onsubmit="return formProcess(this)"><label for="addr0">customer service</label><br>
<input type="radio" name="addr" id="addr0" value="cs@example.com"><br>
<label for="addr1">public relations</label><br>
<input type="radio" name="addr" id="addr1" value="pr@example.2.com"><br>
<label for="addr2">IT</label><br>
<input type="radio" name="addr" id="addr2" value="it@example.3.com"><br><!-- "body" as input name could conflict with document.body -->
<input name="textBody" type="text">
<input type="submit">
</form>
Alternatively, we could put click handlers on all the radios that reset the action value immediately (I wonder if that's more accessible?)
<script>
function formProcess(form)
{
/* More than 1 elm with name, so a collection is returned */
var elms = form.elements.addr, selected;
for(var k=-1, elm; elm=elms[++k];){
if(elm.checked)
selected = elm;
}/* If selected remains undefined (ie no selection made) */
if(!selected){
alert("Please select department");
return false;
}
/* Else set action; allow submit */
form.action = "mailto:"+selected.value;
return true;
}
// pr@example.2.com
</script>
</head>
<body>
<form method="post" action=""
enctype="text/plain" onsubmit="return formProcess(this)"><label for="addr0">customer service</label><br>
<input type="radio" name="addr" id="addr0" value="cs@example.com"><br>
<label for="addr1">public relations</label><br>
<input type="radio" name="addr" id="addr1" value="pr@example2.com"><br>
<label for="addr2">IT</label><br>
<input type="radio" name="addr" id="addr2" value="it@example3.com"><br><!-- "body" as input name could conflict with document.body -->
<input name="textBody" type="text">
<input type="submit">
</form>
I have one more stupid question.
Does anyone know if there any way to incorporate this with our form .asp address?
That is what we normally use for forms, but I am noticing that this way it is going through Outlook. Not sure if that makes sense or not.
This is what I was trying to use:
<form method=post action=http://www.twu.edu/cgi-bin/aspmail.asp id=form1 name=form1 enctype="text/plain" onSubmit="return (checkrequired(this) && formProcess(this))">
Thanks again to everyone for all of their help.
