提交后清除表单输入 [英] Clearing my form inputs after submission

问题描述

我尝试了几种不同的方式，基于我在这个主题上进行的搜索，出于某种原因，我无法实现它。我只是想让我的文本输入和textarea在我点击提交按钮后清除。

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.

以下是代码。

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

推荐答案

提交。在大多数浏览器中，这会导致表单提交和加载服务器响应，而不是在页面上执行javascript。

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.

将提交按钮的类型更改为按钮。另外，由于这个按钮被赋予了id submit ，它会导致与Javascript的提交功能冲突。更改此按钮的ID。尝试像

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

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

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

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

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

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 getElementsByName with index 0.

尝试以下

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
}

这篇关于提交后清除表单输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！