提交后清除我的表单输入

IT技术 javascript jquery html
2021-03-03 06:22:46

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

这是代码。

<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>
6个回答

您的表单已被提交,因为您的按钮是 type 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,我们可以使用getElementsByName索引 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
}

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

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

<form id='myForm'>

然后完成后,将输入字段清除为:

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

你可以试试这个:

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

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

无论如何,jquery 很好.... 另外@Jai 这会不会清除所有输入元素,而不是仅绑定到当前表单中的元素?
2021-04-29 06:22:46

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

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

对于表单中的所有输入元素,这可能有效(我从未尝试过)

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

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

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

这会弄乱提交按钮的文本,因为您只是使用 'input'
2021-05-03 06:22:46
$('#contact-form input[type="text"]').val('');
$('#contact-form textarea').val('');