我根据我在这个主题上所做的搜索尝试了几种不同的方式,但由于某些原因我无法让它发挥作用。我只想在输入提交按钮后清除文本输入和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>
答案 0 :(得分:24)
您的表单已经提交,因为您的按钮类型为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
}
答案 1 :(得分:4)
你可以试试这个:
function submitForm() {
$('form[name="contact-form"]').submit();
$('input[type="text"], textarea').val('');
}
此脚本需要在页面上添加jquery。
答案 2 :(得分:3)
最简单的方法是设置表单元素的值。如果您正在使用jQuery(我强烈推荐),您可以使用
轻松完成$('#element-id').val('')
对于表单中的所有输入元素,这可能有效(我从未尝试过)
$('#form-id').children('input').val('')
请注意,.children只能找到一级向下的输入元素。如果你需要找到孙子等.find()应该可以工作。
可能有更好的方法,但这对你有用。
答案 3 :(得分:2)
试试这个:
$('#contact-form input[type="text"]').val('');
$('#contact-form textarea').val('');
答案 4 :(得分:2)
由于您使用的是jquery
库,我建议您使用reset()
方法。
首先,将id属性添加到表单标记
<form id='myForm'>
然后在完成时,将输入字段清除为:
$('#myForm')[0].reset();
答案 5 :(得分:1)
只需在函数末尾包含这一行,问题就很容易解决!
document.getElementById("btnsubmit").value = "";
答案 6 :(得分:1)
var btnClear = document.querySelector('button');
var inputs = document.querySelectorAll('input');
btnClear.addEventListener('click', () => {
inputs.forEach(input => input.value = '');
});
答案 7 :(得分:1)
答案 8 :(得分:0)
我在jQuery $("#submitForm").val("");
中使用了以下内容
其中submitForm
是html中输入元素的ID。我在从输入字段中提取值之后运行了它。下面的extractValue函数:
function extractValue() {
var value = $("#submitForm").val().trim();
console.log(value);
};
也不要忘记添加preventDefault();
方法来阻止提交类型表单刷新页面!
答案 9 :(得分:0)
您可以分配给 onsubmit
属性:
document.querySelector('form').onsubmit = e => {
e.target.submit();
e.target.reset();
return false;
};
https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onsubmit
答案 10 :(得分:-2)
试试这个:
function submitForm () {
// your code
$('form :input').attr('value', '');
}