利用onsubmit事件实现表单提交后自动清空字段-html教程-PHP中文网

利用onsubmit事件实现表单提交后自动清空字段

碧海醫心

发布： 2025-10-30 12:17:07

原创

539人浏览过

利用onsubmit事件实现表单提交后自动清空字段

本文详细介绍了如何在不刷新页面的前提下，利用HTML表单的`onsubmit`事件，在表单提交成功后自动清空所有输入字段。通过在`onsubmit`属性中执行`this.submit()`、`this.reset()`并返回`false`，可以有效解决使用隐藏`iframe`进行无跳转提交时，表单字段无法自动重置的问题，从而提升用户体验。

在Web开发中，我们经常需要实现表单提交后自动清空输入字段的功能，以便用户可以方便地进行下一次输入。尤其是在采用无页面跳转方式（例如通过隐藏的）提交表单时，这一需求变得更为突出。传统的type="reset"按钮虽然可以清空字段，但它会阻止表单的提交行为；而其他尝试，如页面重定向或meta refresh，往往会导致页面刷新，与无跳转提交的目的相悖。

问题场景分析

考虑以下常见的表单结构，其中使用一个隐藏的作为表单的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的进行处理，而主页面不会发生跳转。然而，一个常见的问题是，表单中的输入字段（例如“Type something...”）在提交后并不会自动清空，用户需要手动删除或刷新页面才能进行新的输入，这无疑降低了用户体验。

解决方案：利用onsubmit事件

解决这个问题的关键在于利用HTML表单的onsubmit事件。onsubmit事件在表单即将提交时触发，允许我们在实际提交发生之前执行JavaScript代码。通过巧妙地组合this.submit()、this.reset()和return false;，我们可以实现提交后自动清空字段的目的。

科威旅游管理系统

该软件是以php+MySQL进行开发的旅游管理网站系统。系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。

查看详情

修改后的表单代码如下：

<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>

登录后复制

在上述代码中，我们在

标签中添加了onsubmit='this.submit();this.reset();return false;'。这行JavaScript代码的执行逻辑如下：

this.submit();: 这行代码会程序化地触发当前表单的提交。由于表单设置了target="votar"，提交操作会定向到隐藏的中，而不会导致主页面刷新。
this.reset();: 紧接着，这行代码会调用表单的reset()方法。reset()方法的作用是将其所有可重置的输入控件（如, , <select>等）恢复到它们的初始值（通常是空值或通过value属性预设的值）。</select>
return false;: 这是至关重要的一步。当onsubmit事件处理函数返回false时，它会阻止浏览器执行表单的默认提交行为。如果没有return false;，浏览器可能会尝试再次提交表单（在this.submit()之后），这可能导致重复提交或意外的页面行为。通过返回false，我们确保了表单只通过this.submit()被程序化地提交一次，并且提交后不会有其他副作用。

注意事项与最佳实践

return false;的重要性: 务必包含return false;以防止双重提交和不必要的页面导航。
兼容性: onsubmit事件和form.submit()、form.reset()方法在现代浏览器中都具有良好的兼容性。
用户反馈: 虽然表单字段被清空了，但用户可能不清楚提交是否成功。在实际应用中，建议在表单提交成功后，通过JavaScript（例如在加载完成后监听其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结合的方案仍然是一个简洁有效的选择。

总结

通过在HTML表单的onsubmit事件中添加this.submit();this.reset();return false;这行简单的JavaScript代码，我们可以优雅地解决在使用隐藏进行无跳转表单提交后，输入字段无法自动清空的问题。这种方法既保持了页面的流畅性，又提升了用户填写表单的便捷性，是实现这一常见需求的一种高效且兼容性良好的解决方案。在选择表单提交方式时，应根据项目的具体需求和复杂程度，权衡onsubmit与<iframe>方案和AJAX方案的优劣。

以上就是利用onsubmit事件实现表单提交后自动清空字段的详细内容，更多请关注php中文网其它相关文章！