Javascript 提交后清除我的表单输入

Clearing my form inputs after submission

提问by Szuturon

I've tried it a few different ways based on searches I've done on the subject and for some reason I can't get it to work. I just want my text inputs and textarea to clear after I hit the submit button.

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

Here's the code.

这是代码。

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

回答by Kami

Your form is being submitted already as your button is type submit. Which in most browsers would result in a form submission and loading of the server response rather than executing javascript on the page.

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

Change the type of the submit button to a button. Also, as this button is given the id submit, it will cause a conflict with Javascript's submit function. Change the id of this button. Try something like

将提交按钮的类型更改为button. 此外，由于此按钮被赋予 id submit，它会导致与 Javascript 的提交功能发生冲突。更改此按钮的 id。尝试类似的东西

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

Another issue in this instance is that the name of the form contains a -dash. However, Javascript translates -as a minus.

这种情况下的另一个问题是表单的名称包含一个-破折号。但是，Javascript 翻译-为减号。

You will need to either use array based notation or use document.getElementById()/ document.getElementsByName(). The getElementById()function returns the element instance directly as Id is unique (but it requires an Id to be set). The getElementsByName()returns an array of values that have the same name. In this instance as we have not set an id, we can use the getElementsByNamewith index 0.

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

Try the following

尝试以下

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
}

回答by Jai

You can try this:

你可以试试这个：

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

This script needs jquery to be added on the page.

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

回答by Rotimi

since you are using jquerylibrary, i would advise you utilize the reset()method.

由于您使用的是jquery图书馆，我建议您使用该reset()方法。

Firstly, add an id attribute to the form tag

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

<form id='myForm'>

Then on completion, clear your input fields as:

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

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

回答by Nick Mitchinson

The easiest way would be to set the value of the form element. If you're using jQuery (which I would highly recommend) you can do this easily with

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

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

For all input elements in the form this may work (i've never tried it)

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

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

Note that .children will only find input elements one level down. If you need to find grandchildren or such .find() should work.

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

There may be a better way however this should work for you.

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

回答by Duarte Madue?o

Try this:

尝试这个：

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

回答by Ado Moshe

I used the following with jQuery $("#submitForm").val("");

我在 jQuery 中使用了以下内容 $("#submitForm").val("");

where submitFormis the id for the input element in the html. I ran it AFTER my function to extract the value from the input field. That extractValue function below:

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

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

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

Also don't forget to include preventDefault();method to stop the submit type form from refreshing your page!

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

回答by Omkar Bhad

Just include this line at the end of function and the Problem is solved easily!

只需在函数末尾包含这一行，问题就很容易解决了！

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

回答by Vikas Shukla

Try this:

尝试这个：

function submitForm () {
    // your code

    $('form :input').attr('value', '');
}