提交时重置 HTML 表单答案

【问题标题】：Resetting HTML form upon submission提交时重置 HTML 表单
【发布时间】：2016-08-04 14:04:40
【问题描述】：

我正在使用 EmailJS (emailjs.com) 提交表单，虽然我能够让它正确发送，但当我使用 reset() 方法时它实际上停止发送。这是我的有效代码：

<div class="topForm">
    <form id="myform" onsubmit="emailjs.sendForm('mailjet', 'city_request', this); return false;" method="post">
        <div class="form-group">
            <input type="email" class="email" id="userEmail" placeholder="Enter email" name="userEmail">
            <button type="submit" id="userEmailButton" class="btn btn-primary">Sign up</button>
        </div>
    </form>
</div>

通过以上，我可以在 EmailJS 的日志部分查看提交的信息。我的问题是当我这样做时：

<form id="myform" onsubmit="emailjs.sendForm('mailjet', 'city_request', this).reset(); return false;" method="post">

添加 .reset() 将在提交时清除表单，但不会将其发送到 EmailJS。此外，我尝试在一个文件中使用 JavaScript，如下所示：

function myFunction() {
    var form = document.getElementById('myform');
    form.reset();
}

但显然它也不起作用。有谁知道发生了什么事？我一直试图让表单与 reset() 方法同时工作，但一点运气都没有。

【问题讨论】：

您是否尝试过使用.then() 仅在成功提交表单后应用重置：emailjs.com/docs/api-reference/emailjs-send
哇。感谢您注意到这一点，我完全查看了它，并希望我能早点注意到它。我得到了你的建议，所以再次感谢！
@RobertC 你想提交一个答案以便我接受它作为正确的解决方案吗？
不，这很酷。我从未使用过这个 JS 解决方案，但通过 Google 找到了文档。

标签： javascript html forms twitter-bootstrap

【解决方案1】：

根据 Robert C 的评论，我可以通过执行以下操作将其重置并正确提交给 EmailJS：

<form id="myform" onsubmit="emailjs.sendForm('mailjet', 'city_request', this).then(reset()); return false;" method="post">

使用.then() 并将reset() 放在括号内。

【讨论】：

【解决方案2】：

根据他们的文档 (https://www.emailjs.com/docs/api-reference/emailjs-send/)，您可以对 send() 方法使用承诺 - 但尚不清楚 sendForm() 方法是否可以使用。你应该试试。如果sendForm 可以与承诺一起使用 - 将reset() 放在那里。如果没有 - 您将不得不使用 send() 方法并从表单元素中为自己准备 JSON 对象（第三个参数）。

【讨论】：

感谢您的意见。我能够使用 .then(reset()) 让它工作。