提交后清除我的表单输入

Clearing my form inputs after submission

本文关键字：表单 输入 我的 清除 提交      更新时间：2023-09-26

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

这是代码。

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

您的表单已经提交，因为您的按钮键入 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
}

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

首先，在表单标签中添加 id 属性

<form id='myForm'>

然后在完成后，清除输入字段，如下所示：

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

根据MDN使用HTMLFormElement.prototype.reset

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

你可以试试这个：

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

此脚本需要将 jquery 添加到页面上。

最简单的方法是设置表单元素的值。如果你使用的是jQuery（我强烈推荐），你可以很容易地做到这一点 

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

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

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

请注意，.children 只能找到低一级的输入元素。如果你需要找孙子或这样的.find（）应该工作。

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

您可以分配给 onsubmit 属性：

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

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

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

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


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

**

单击后使用要清除输入的按钮，而不是btnSave**

只需在函数末尾包含以下行：

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

我将以下内容与jQuery一起使用：

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

其中submitForm是 HTML 中输入元素的 ID。我在我的函数之后运行它以从输入字段中提取值。该提取值函数如下：

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

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

在函数上，您正在提交按钮的事件上运行。如果您使用表单本身来运行任何 if 语句，请在事件的函数中执行以下操作。

//assigned form id value to a variable. 
let myFormId = $('form').attr('id');
//if statement or loop goes here.
document.getElementById(myFormId).reset();
相关文章：