Javascript 表单 - 基于选择的不同电子邮件答案

【问题标题】：Javascript form - different email based on choiceJavascript 表单 - 基于选择的不同电子邮件
【发布时间】：2016-11-01 20:41:30
【问题描述】：

我正在使用带有服务器端处理器的 javascript 表单，我希望能够让表单根据下拉菜单发送到不同的电子邮件。我已经根据其他表格尽可能地完成了，但我似乎无法让电子邮件通过。我在电子邮件地址的选项标签下添加了选项，并将值从整体表单电子邮件更改为“mailTo”（）我很确定这是问题所在，但我不知道如何解决它。

<form action="http://www.testsite.com/cgi-sys/formmail.pl" method="post" name="hgmailer">
<input type="hidden" name="recipient" value="mailTo">
<input type="hidden" name="subject" value="Website Consult Request">
<table width="100%" border="0" cellspacing="10px" cellpadding="10px">
  <tbody>
    <tr>
      <td>Nearest Location*</td>
      <td><select id="mailTo" name"mailTo">
      	<option value="option1@testsite.com">Option1</option>
      	<option value="option2@testsite.com">Option2</option>
      	<option value="option3@testsite.com">Option3</option>
      	<option value="option4@testsite.com">Option 4</option>

      	</select></td>
</tr>
  </tbody>
</table><p>&nbsp;</p>
<input type="button" value="Schedule a Consultation" onclick="hgsubmit();" class="button">
<input type="hidden" name="redirect" value="thankyou.html">
</form>

【问题讨论】：

那么，您将所选选项的值设置到名为recipient 的隐藏字段中吗？这不起作用？
当您提交表单时，如果您选择了第一个选项，那么 http POST 请求将有一个名为 mailTo=option1@testsite.com 的参数。它还将有另一个名为recipient=mailTo 的参数。在服务器端，如果您尝试从recipient 参数中提取电子邮件地址，它不会存在，请尝试从mailTo 参数中提取它。
您需要验证此服务器端，否则您只是在创建一个垃圾邮件系统，允许向每个可能的收件人发送电子邮件。最佳实践类似于在服务器端拥有一个包含可能收件人地址的数组，并将数组索引仅用作选项值。

标签： javascript html forms email

【解决方案1】：

编辑 - 我的最终代码之前没有保存

您可以添加一个 javascript 函数来将“收件人”的值更改为所选电子邮件，例如...

function changeVal() {
var selectedVal = document.getElementById("mailTo").value;
document.getElementById("recipient").value = selectedVal;

var test = document.getElementById("recipient").value;
//alert(test);
  
}

<form action="http://www.testsite.com/cgi-sys/formmail.pl" method="post" name="hgmailer">
    <input type="hidden" name="recipient" id="recipient" value="mailTo">
    <input type="hidden" name="subject" value="Website Consult Request">
    <table width="100%" border="0" cellspacing="10px" cellpadding="10px">
      <tbody>
        <tr>
          <td>Nearest Location*</td>
          <td><select id="mailTo" name"mailTo" onchange="changeVal()">
          	<option value="option1@testsite.com">Option1</option>
          	<option value="option2@testsite.com">Option2</option>
          	<option value="option3@testsite.com">Option3</option>
          	<option value="option4@testsite.com">Option 4</option>
    
          	</select></td>
    </tr>
      </tbody>
    </table><p>&nbsp;</p>
    <input type="button" value="Schedule a Consultation" onclick="hgsubmit();" class="button">
    <input type="hidden" name="redirect" value="thankyou.html">
    </form>

...我添加了一个警报，如果您想测试，可以将其注释掉。我也是用 javascript 而不是 Jquery 做的，因为你只要求这样做。

【讨论】：