Как очистить форму?
Например, у меня есть такая форма:
<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
, он очищает только поля, которые я вводил после перезагрузки формы.
Как я могу очистить все поля, если некоторые поля уже заполнены во время загрузки формы.
Ответы
Ответ 1
Как указывали другие, я думаю, вы должны пересмотреть необходимость заполнения формы.
Но если вам действительно нужна эта функциональность, это один из способов сделать это:
Обычный 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;
});
});
Также обратите внимание, что я не очищаю значения скрытых входов, флажков и переключателей.
Играйте с этим здесь.
Ответ 2
В jquery просто вы можете использовать
$("#yourFormId").trigger('reset');
Ответ 3
Вам придется очистить их через javascript (или очистить его от сервера).
Кнопка reset
будет иметь только элементы формы reset для их начального значения - если это было конкретное значение, то что это будет reset to.
Ответ 4
Если вы используете jQuery, код намного проще:
$('#my-form').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');
Вы также можете удалить: hidden из селектора .not, если вы хотите также удалить скрытые поля.
Ответ 5
Самый простой способ очистки формы - использовать тег 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>
Ответ 6
Я обобщил некоторые предложения, используя 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 lib в раздел главы и добавил обработчик onclick
к кнопке Reset. Наконец, я добавил код javascript на основе отзывов от некоторых других ответов здесь.
Я также добавил заданное значение в одно текстовое поле. Функция val('')
не очистила бы такое поле, поэтому я также добавил attr('value','')
к последней строке script, чтобы удалить такие значения по умолчанию.
Ответ 7
Вы можете сделать что-то подобное в JS и называть его от onclick
внутри вашей кнопки:
function submit() {
$('#fieldIdOne').val('');
$('#fieldIdTwo').val('');
}
И затем в вашем файле HTML:
<button id="submit" onclick="submit(); return false">SIGN UP</button>
Если вы используете это решение с Firebase, оно фактически ничего не отправит в базу данных, если вы не добавите return false
сразу после вызова.
Ответ 8
Еще один способ сделать это с помощью HTMLFormControlsCollection:
for (let el of form.elements) el.value = null
Ответ 9
Я только наткнулся на этот вопрос и использовал <a>
, чтобы облегчить очистку формы, перезагрузив страницу. Легко стилизовать элемент <a>
для отображения в виде кнопки.
например.
<a href="?" class="btn btn-default">Clear</a>
Используя? для атрибута href, <a>
перезагрузит страницу с сервера, не отправив ее.
Я предпочитаю решения, которые не зависят от JavaScript, поэтому, надеюсь, это кому-то полезно.
Ответ 10
Использование JavaScript дает форму ID 'myform':
document.getElementById( 'MyForm') сброса();.