如何使用 Javascript、jQuery 对提交按钮应用多个操作？

Posted 2023-05-09

【中文标题】如何使用 Javascript、jQuery 对提交按钮应用多个操作？

【英文标题】：How To Apply Multiple Actions To A SUBMIT Button With Javascript, jQuery?

【发布时间】：2019-05-02 15:34:39

【问题描述】：

我目前有一个带有 3 个提交按钮的表单，这些按钮通过 URL 传递“FULLNAME”和“EMAIL”以及“DB”变量，具体取决于单击的提交按钮 - 这些值然后填充下一页上的字段。

<form action="https://othersite.com/index.html?DB=BOTH&values[FULLNAME]&values[EMAIL]" method="get" name="form" >
<input type="hidden" name="DB" value="BOTH" />
<input type="text" id="fullname" name="values[FULLNAME]"  >
<input type="email" id="email" name="values[EMAIL]" >

<button type="submit" name="OS_TYPE" value="OSX &amp; WINDOWS">OSX &amp; WINDOWS</button>
<button type="submit" name="DB" value="OSX" formaction="https://othersite.com/index.html?DB=OSX&values[FULLNAME]&values[EMAIL]">OSX ONLY</button>
<button type="submit" name="DB" value="WINDOWS" formaction="https://othersite.com/index.html?DB=WINDOWS&values[FULLNAME]&values[EMAIL">WINDOWS ONLY</button>
</form>

上面的表单可以正常工作，根据单击的提交按钮（两者都是默认）。

但是，我还需要发送一封电子邮件，其中包含 FULLNAME、EMAIL 和可能的 DB 类型的值，最好使用我指定的 formmail.php：

我的服务器上 formmail 脚本的 URL，例如 myexample.com/formmail.php 发送方法，即 POST 包含 formmail 收件人电子邮件地址的隐藏输入字段 包含电子邮件主题的隐藏输入字段

根据用户点击的提交按钮，用户将继续被重定向到 othersite.com 页面。

任何使用 jQuery、javascript 或 PHP 的帮助将不胜感激。我是一名前端开发人员，这超出了我的技能范围！

谢谢

【问题讨论】：

发布您尝试解决问题的方法，很高兴获得建议/结果

我正在努力为提交按钮添加多个操作，正如我所说，后端不是我的专长，如果变量可以发送到 formmail 和相关链接提交按钮之后会很棒，但我真的不知道如何。

【参考方案1】：

您不能通过 JavaScript 直接发送电子邮件。但是，您可以使用 window.open 启动带有预填电子邮件地址的电子邮件客户端：

window.open('mailto:[e-mail]');

现在，如果这是您想要的，请在您当前的表单中从按钮元素中删除 type="submit" 属性，并在单击按钮时调用 JavaScript 函数，这将打开电子邮件客户端并提交您现有的表单：

<button name="OS_TYPE" value="OSX &amp; WINDOWS" onclick="submitMyForm()">OSX &amp; WINDOWS</button>

并创建一个 JavaScript 函数，该函数将打开电子邮件客户端并提交您的表单：

function submitMyForm() 
    window.open('mailto:[e-mail]');
    document.getElementById("myForm").submit(); //attach an id to your form

【讨论】：

谢谢，但我希望当用户单击任何提交按钮时，这些值可以通过 formmail.php 脚本“在后台”发送。

如果包含表单的页面是 PHP 页面，是否可以使用 PHP？