Forum Moderators: open
How can I set a dynamic recipient depending on what form field is selected. Is there a way of doing this with JavaScript, but somehow hiding the email or encoding it to avoid spam? Each option should send to a different email address.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Form test</title>
</head>
<body>
<form action="/blah.jsp" method="post" id="c_form" name="c_form">
<input type="hidden" value="example@blah.com" id="recipient" name="recipient"/>
<input type="hidden" value="/thank you" id="redirect_url" name="redirect_url"/>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<select id="s_1" name="s_1">
<option value="" selected="selected">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr>
<td valign="top" colspan="2"><a onclick="$('#c_form').submit()" href="#"><img src="img.gif" border="0" name="img" alt="Submit" /></a></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Happy Friday!
I don't know .jsp, but the logic would be something like this. Presume "$input" is the associative key/value array of data coming in from the form, so the selected recipient would be parsed from "$input{'s_1'}".
# key/value associative array containing email addresses
%addresses = (
1 => one@example.com,
2 => two@example.com,
3=> three@example.com
);
$to = $addresses{$input{'s_1'}};
if ($to) { # continue and email; }
else { #error, return to form, no recipient selected }
Also you'd want the "from" for the customer receipt to come from a "no-reply" address so spammers submitting the form just to get at the real email address . . . . won't be able to.
Another observation,
<a onclick="$('#c_form').submit()" href="#"><img src="img.gif" border="0" name="img" alt="Submit" /></a>
First, this makes your form Javascript dependent; it won't work if JS is disabled. You should use input type=image or input type=submit and style the button with a background image.
<input type="image" src="img.gif" border="0" name="img" alt="Submit" />
or
#submitButton {
width: 200px;
height: 75px;
background:url(img.gif) top left no-repeat;
}
.....
<input type="submit" id="submitButton" value="Submit" />
Second, any "event" should be on the form itself, not the button. Although the previous method negates the need for Javascript, this can be useful for Javascript form validation. If a user presses enter while focused on one of the fields (with the exception of a textarea field,) the onclick will never get fired.
<form action="/blah.jsp" method="post" id="c_form" name="c_form" onSubmit="this.form.submit(); return false;">
......
<input type="image" src="img.gif" border="0" name="img" alt="Submit" />
or, using the validation scenario, return false from "validate()"
<form action="/blah.jsp" method="post" id="c_form" name="c_form" onSubmit="return validate();">
The point being, return false tells the browser to let the JS manage the form submission, avoiding a double-submit, or a submit in spite of required fields missing.
