提交后清除我的表单输入答案

【问题标题】：Clearing my form inputs after submission提交后清除我的表单输入
【发布时间】：2013-01-29 17:57:14
【问题描述】：

根据我对该主题所做的搜索，我尝试了几种不同的方法，但由于某种原因，我无法让它发挥作用。我只想在点击提交按钮后清除我的文本输入和文本区域。

这是代码。

<div id="sidebar-info">
    <form name="contact-form" action="formprocess.php" method="post" target="ninja-frame">
        <h1>By Phone</h1>
        <p id="by-phone">XXX-XXX-XXXX</p>
        <h1>By Email</h1>
        <p id="form-row">Name</p>
        <input name="name" id="name" type="text" class="user-input" value="">
        <p id="form-row">Email</p>
        <input name="email" id="email" type="text" class="user-input" value="">
        <p id="form-row">Message</p>
        <textarea name="message" id="message" class="user-input" rows="10" maxlength="1500"></textarea>
        <p>*Please fill out every field</p>
        <input type="submit" value="Submit" id="submit" onclick="submitForm()">

        <script>
            function submitForm() {
            document.contact-form.submit();
            document.contact-form.reset();
            }
        </script>
    </form>
</div>

【问题讨论】：

AFAIK，您的<form> 正在提交中。这意味着您的浏览器将导航到不同的页面，并且当前页面中的进一步操作将没有多大意义。或者，我错过了什么？
@Alexander 你怎么知道它被完全提交了？我们看不到onsubmit 事件的任何处理程序，但它们很容易就在那里。处理程序可以根据任何条件停止提交。我不同意清除表格是最好的主意，但这取决于 OP

标签： javascript jquery html

【解决方案1】：

您的表单已提交，因为您的按钮类型为submit。在大多数浏览器中，这会导致表单提交和加载服务器响应，而不是在页面上执行 javascript。

将提交按钮的类型更改为button。此外，由于此按钮的 id 为 submit，因此会与 Javascript 的提交函数发生冲突。更改此按钮的 id。尝试类似

<input type="button" value="Submit" id="btnsubmit" onclick="submitForm()">

此实例中的另一个问题是表单名称包含- 破折号。但是，Javascript 将 - 翻译为减号。

您将需要使用基于数组的表示法或使用document.getElementById() / document.getElementsByName()。 getElementById() 函数直接返回元素实例，因为 Id 是唯一的（但它需要设置 Id）。 getElementsByName() 返回一个具有相同名称的值数组。在这种情况下，由于我们没有设置 id，我们可以使用索引为 0 的getElementsByName。

试试下面的

function submitForm() {
   // Get the first form with the name
   // Usually the form name is not repeated
   // but duplicate names are possible in HTML
   // Therefore to work around the issue, enforce the correct index
   var frm = document.getElementsByName('contact-form')[0];
   frm.submit(); // Submit the form
   frm.reset();  // Reset all form data
   return false; // Prevent page refresh
}

【讨论】：

【解决方案2】：

由于您使用的是jquery 库，我建议您使用reset() 方法。

首先，给form标签添加一个id属性

<form id='myForm'>

然后在完成后，将输入字段清除为：

$('#myForm')[0].reset();

【讨论】：

【解决方案3】：

你可以试试这个：

function submitForm() {
  $('form[name="contact-form"]').submit();
  $('input[type="text"], textarea').val('');
}

这个脚本需要在页面上添加jquery。

【讨论】：

jquery 无论如何都很好......而且@Jai 这不会清除所有输入元素，而不是只绑定到当前表单中的那些吗？

【解决方案4】：

最简单的方法是设置表单元素的值。如果您使用的是 jQuery（我强烈推荐），您可以使用

轻松完成此操作

$('#element-id').val('')

对于表单中的所有输入元素，这可能有效（我从未尝试过）

$('#form-id').children('input').val('')

请注意，.children 只会找到向下一级的输入元素。如果您需要寻找孙子或这样的 .find() 应该可以工作。

可能有更好的方法，但这应该适合你。

【讨论】：

这会弄乱提交按钮的文本，因为你只是使用'input'

【解决方案5】：

$('#contact-form input[type="text"]').val('');
$('#contact-form textarea').val('');

【讨论】：

【解决方案6】：

var btnClear = document.querySelector('button');
var inputs = document.querySelectorAll('input');
 
btnClear.addEventListener('click', () => {
    inputs.forEach(input =>  input.value = '');
});

【讨论】：

虽然此代码可以解决 OP 的问题，但最好包含关于您的代码如何解决 OP 问题的说明。这样，未来的访问者可以从您的帖子中学习，并将其应用到他们自己的代码中。 SO 不是编码服务，而是知识资源。此外，高质量、完整的答案更有可能得到支持。这些功能，以及所有帖子都是独立的要求，是 SO 作为一个平台的一些优势，使其与论坛区分开来。您可以编辑以添加其他信息和/或使用源文档补充您的解释。

【解决方案7】：

你可以根据MDN使用HTMLFormElement.prototype.reset

document.getElementById("myForm").reset();

【讨论】：

除了提及您的答案的参考之外，将您的答案的一部分包含在内更为合适。如果参考不再可用，这可能对未来的读者有用。
我添加了代码 sn-p 并链接到 MDN。永远不要链接到 W3Schools，当然永远不要将其用作参考。它是一种非权威的、有时质量很差的资源，并且不受 W3C 的认可或隶属于 W3C。始终使用 MDN

【解决方案8】：

您可以分配给onsubmit 属性：

document.querySelector('form').onsubmit = e => {
   e.target.submit();
   e.target.reset();
   return false;
};

https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onsubmit

【讨论】：

【解决方案9】：

只需在函数末尾包含这一行：

document.getElementById("btnsubmit").value = "";

【讨论】：

【解决方案10】：

我在 jQuery 中使用了以下内容：

$("#submitForm").val("");

submitForm 是 html 中输入元素的 id。我在我的函数之后运行它以从输入字段中提取值。下面那个extractValue函数：

function extractValue() {
    var value = $("#submitForm").val().trim();
    console.log(value);
};

另外不要忘记包含preventDefault(); 方法来阻止提交类型的表单刷新您的页面！

【讨论】：

【解决方案11】：

btnSave.addEventListener("click", () => {
  inputs.forEach((input) => (input.value = ""));
});

**使用你想在点击后清除输入的按钮而不是 btnSave **

【讨论】：