本文详细介绍了如何在不刷新页面的前提下，利用HTML表单的`onsubmit`事件，在表单提交成功后自动清空所有输入字段。通过在`onsubmit`属性中执行`this.submit()`、`this.reset()`并返回`false`，可以有效解决使用隐藏`iframe`进行无跳转提交时，表单字段无法自动重置的问题，从而提升用户体验。
在Web开发中，我们经常需要实现表单提交后自动清空输入字段的功能，以便用户可以方便地进行下一次输入。尤其是在采用无页面跳转方式（例如通过隐藏的<iframe>）提交表单时，这一需求变得更为突出。传统的type="reset"按钮虽然可以清空字段，但它会阻止表单的提交行为；而其他尝试，如页面重定向或meta refresh，往往会导致页面刷新，与无跳转提交的目的相悖。
问题场景分析
考虑以下常见的表单结构，其中使用一个隐藏的<iframe>作为表单的target，以实现提交后不刷新当前页面的效果：
<div class="limiter">
<div class="container-login100" style="background-image: url('images/bg-01.jpg');">
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<iframe name="votar" style="display:none;"></iframe>
<form action="https://docs.google.com/forms/d/e/.../formResponse" target="votar">
<span class="login100-form-title p-b-49">Make a comment.</span>
<div class="wrap-input100 validate-input m-b-23" data-validate="Username is reauired">
<input class="input100" type="text" name="entry.???" placeholder="Type something...">
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn">submit</button>
</div>
</div>
</form>
</div>
</div>
</div>在这种设置下，当用户点击提交按钮后，表单数据会被发送到action指定的地址，并通过名为votar的<iframe>进行处理，而主页面不会发生跳转。然而，一个常见的问题是，表单中的输入字段（例如“Type something...”）在提交后并不会自动清空，用户需要手动删除或刷新页面才能进行新的输入，这无疑降低了用户体验。
解决方案：利用onsubmit事件
解决这个问题的关键在于利用HTML表单的onsubmit事件。onsubmit事件在表单即将提交时触发，允许我们在实际提交发生之前执行JavaScript代码。通过巧妙地组合this.submit()、this.reset()和return false;，我们可以实现提交后自动清空字段的目的。
修改后的表单代码如下：
<div class="limiter">
<div class="container-login100" style="background-image: url('images/bg-01.jpg');">
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<iframe name="votar" style="display:none;"></iframe>
<form action="https://docs.google.com/forms/d/e/.../formResponse" target="votar" onsubmit='this.submit();this.reset();return false;'>
<span class="login100-form-title p-b-49">Make a comment.</span>
<div class="wrap-input100 validate-input m-b-23" data-validate="Username is reauired">
<input class="input100" type="text" name="entry.???" placeholder="Type something...">
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn">submit</button>
</div>
</div>
</form>
</div>
</div>
</div>在上述代码中，我们在<form>标签中添加了onsubmit='this.submit();this.reset();return false;'。这行JavaScript代码的执行逻辑如下：
- this.submit();: 这行代码会程序化地触发当前表单的提交。由于表单设置了target="votar"，提交操作会定向到隐藏的<iframe>中，而不会导致主页面刷新。
- this.reset();: 紧接着，这行代码会调用表单的reset()方法。reset()方法的作用是将其所有可重置的输入控件（如<input type="text">, <textarea>, <select>等）恢复到它们的初始值（通常是空值或通过value属性预设的值）。
- return false;: 这是至关重要的一步。当onsubmit事件处理函数返回false时，它会阻止浏览器执行表单的默认提交行为。如果没有return false;，浏览器可能会尝试再次提交表单（在this.submit()之后），这可能导致重复提交或意外的页面行为。通过返回false，我们确保了表单只通过this.submit()被程序化地提交一次，并且提交后不会有其他副作用。
注意事项与最佳实践
- return false;的重要性: 务必包含return false;以防止双重提交和不必要的页面导航。
- 兼容性: onsubmit事件和form.submit()、form.reset()方法在现代浏览器中都具有良好的兼容性。
- 用户反馈: 虽然表单字段被清空了，但用户可能不清楚提交是否成功。在实际应用中，建议在表单提交成功后，通过JavaScript（例如在<iframe>加载完成后监听其onload事件，或通过AJAX提交并处理回调）向用户提供视觉反馈，例如显示一个“提交成功”的消息。
-
AJAX替代方案: 对于更复杂的交互和更好的用户体验，通常推荐使用AJAX（Asynchronous JavaScript and XML）来提交表单。在使用AJAX提交时，您可以在AJAX请求的成功回调函数中手动清空表单字段，例如：
document.getElementById('myForm').addEventListener('submit', function(event) { event.preventDefault(); // 阻止默认表单提交 // 使用Fetch API或XMLHttpRequest发送表单数据 fetch(this.action, { method: this.method, body: new FormData(this) }) .then(response => response.text()) .then(data => { console.log('Success:', data); this.reset(); // 提交成功后清空表单 // 显示成功消息 }) .catch(error => { console.error('Error:', error); // 显示错误消息 }); });然而，对于简单的无刷新提交且不希望引入复杂AJAX逻辑的场景，onsubmit结合<iframe>的方案仍然是一个简洁有效的选择。
总结
通过在HTML表单的onsubmit事件中添加this.submit();this.reset();return false;这行简单的JavaScript代码，我们可以优雅地解决在使用隐藏<iframe>进行无跳转表单提交后，输入字段无法自动清空的问题。这种方法既保持了页面的流畅性，又提升了用户填写表单的便捷性，是实现这一常见需求的一种高效且兼容性良好的解决方案。在选择表单提交方式时，应根据项目的具体需求和复杂程度，权衡onsubmit与<iframe>方案和AJAX方案的优劣。
