Как очистить форму?
Например, у меня есть такая форма:
<form method='post' action='someaction.php' name='myform'>
<input type='text' name='text1'>
<input type='text' name='text2'>
<input type='checkbox' name="check1">Check Me
<textarea rows="2" cols="20" name='textarea1'></textarea>
<select name='select1'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type='reset' value='Reset' name='reset'>
<input type='submit' value='Submit' name='submit'>
</form>
Когда я нажимаю Reset он опустошает все поля. Но если я заполню некоторые поля, используя URL-параметры, а затем нажмите Reset, он только очищает поля, которые я ввожу после перезагрузки формы.
Как я могу очистить все поля, если некоторые поля уже заполнены во время загрузки формы.
9 ответов
Как отмечали другие, я думаю, вам следует пересмотреть необходимость бланка формы. Но, если вам действительно нужна эта функциональность, это один из способов сделать это:
Простой Javascript:
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].innerHTML= '';
return false;
}
Обратите внимание, что я закомментировал случай, в котором я очищаю hidden входы. В большинстве случаев в этом нет необходимости.
Чтобы это работало, вам нужно вызвать функцию из onclick обработчик кнопки (или другим способом), например, так:
<input type='reset' value='Reset' name='reset' onclick="return resetForm(this.form);">
Вы можете проверить все это здесь на jsFiddle.
Если вы используете jQuery в своем проекте, вы можете сделать это с гораздо меньшим количеством кода (и не нужно менять HTML):
jQuery(function($) { // onDomReady
// reset handler that clears the form
$('form[name="myform"] input:reset').click(function () {
$('form[name="myform"]')
.find(':radio, :checkbox').removeAttr('checked').end()
.find('textarea, :text, select').val('')
return false;
});
});
Также обратите внимание, что я не очищаю значения скрытых входов, флажков и переключателей.
Играть с этим здесь.
В JQuery просто вы можете использовать,
$("#yourFormId").trigger('reset');
Вы должны будете очистить их все через javascript (или очистить его на стороне сервера).
reset Кнопка только сбросит элементы формы к их начальному значению - если это было определенное значение, это то, к чему оно будет сброшено.
Самый простой способ очистить форму - использовать тег HTML
<input type="reset" value="Reset">
Пример:
<form>
<table>
<tr>
<td>Name</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Reset</td>
<td><input type="reset" value="Reset"></td>
</tr>
</table>
</form>
Простой способ сделать это с помощью JS:
<form id="myForm">
<!-- inputs -->
</form>
const { myForm } = document.forms;
myForm.reset();
Если вы используете jQuery, код намного проще:
$('#my-form').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');
Вы также можете удалить:hidden из селектора.not, если вы также хотите очистить скрытые поля.
Вы можете сделать что-то подобное в JS и вызвать его из onclick внутри вашей кнопки:
function submit() {
$('#fieldIdOne').val('');
$('#fieldIdTwo').val('');
}
А затем в вашем HTML-файле:
<button id="submit" onclick="submit(); return false">SIGN UP</button>
Если вам случится использовать это решение с Firebase, оно на самом деле ничего не отправит в базу данных, если вы не добавите return false сразу после звонка.
Я суммировал некоторые предложения, используя jQuery, чтобы дать более полное решение вопроса:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo Forms</title>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
</head>
<body>
<form method='post' action='someaction.php' name='myform'>
<input type='text' name='text1'>
<input type='text' name='text2' value='preset value'>
<input type='checkbox' name="check1">Check Me
<textarea rows="2" cols="20" name='textarea1'></textarea>
<select name='select1'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type='button' value='Reset' name='reset' onclick="return clearForm(this.form);">
<input type='submit' value='Submit' name='submit'>
<script>
function clearForm(form) {
var $f = $(form);
var $f = $f.find(':input').not(':button, :submit, :reset, :hidden');
$f.val('').attr('value','').removeAttr('checked').removeAttr('selected');
}
</script>
</form>
</body>
</html>
Обратите внимание, что я добавил включение библиотеки jquery в раздел head и добавил onclick обработчик кнопки сброса. Наконец, я добавил код javascript, основываясь на ответах некоторых других ответов здесь.
Я также добавил предустановленное значение в одно текстовое поле. val('') функция не очистит такое поле, поэтому я также добавил attr('value','') до последней строки скрипта, чтобы очистить также такие значения по умолчанию.
Другой способ сделать это с помощью HTMLFormControlsCollection:
for (let el of form.elements) el.value = null
Я только сталкивался с этим вопросом и использовал <a> для облегчения очистки формы путем перезагрузки страницы. Легко стилизовать <a> элемент, чтобы появиться как кнопка.
например
<a href="?" class="btn btn-default">Clear</a>
Используя? для атрибута href, <a> перезагрузит страницу с сервера, не отправляя ее.
Я предпочитаю решения, которые не зависят от JavaScript, так что, надеюсь, это кому-нибудь пригодится.
Используя JavaScript, дайте форме идентификатор "myform":
. Document.getElementById('MyForm') сброса ();