如何在不加载外部库的情况下清除HTML / JS中的表单?
这是我迄今为止所尝试过的以及它们如何失败:
<input type="reset" value="Reset">
这并不清除表单,只会将其重置为原始值。
form.getElementsByTagName('textarea').innerHTML = ''
如果尚未编辑,则仅清除表单。如果表单已被编辑,则不执行任何操作。这是一个JSfiddle,其中这两个已合并,但如果您编辑textarea并点击清除,则可以看到它无效(source of JSfiddle)。
答案 0 :(得分:3)
使用text[i].value
代替text[i].innerHTML
:
function resetForm(form) {
// clearing inputs
var inputs = form.getElementsByTagName('input');
for (var i = 0; i<inputs.length; i++) {
switch (inputs[i].type) {
case 'hidden':
case 'text':
inputs[i].value = '';
break;
case 'radio':
case 'checkbox':
inputs[i].checked = false;
}
}
// clearing selects
var selects = form.getElementsByTagName('select');
for (var i = 0; i<selects.length; i++)
selects[i].selectedIndex = 0;
// clearing textarea
var text= form.getElementsByTagName('textarea');
for (var i = 0; i<text.length; i++)
text[i].value= '';
return false;
}
&#13;
<form method='post' action='someaction.php' name='myform'>
<input type='text' name='text1' value="a value">
<input type='text' name='text2'>
<input type='checkbox' name="check1" checked>Check Me
<input type='radio' name="radio1" value="a" >
<input type='radio' name="radio1" value="b" checked>
<input type='radio' name="radio1" value="c">
<textarea rows="2" cols="20" name='textarea1'>
some text
</textarea>
<select name='select1'>
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type='reset' value='Reset' name='reset' onclick="return resetForm(this.form);">
<input type='submit' value='Submit' name='submit'>
</form>
&#13;
答案 1 :(得分:0)
尝试我编辑的以下方式,它会清除textarea https://gist.github.com/anonymous/76b3c08a2d38ddafc15791501173a6b8