Очистить / обновить поля формы html после успешной отправки [duplicate]
13 ответов
Я наконец решил проблему! @RobG был прав относительно тега form и table. тег form должен быть размещен за пределами таблицы. с этим,
<td><input type="reset" id="configreset" value="Reset"></td>
работает без необходимости jquery или чего-то еще. просто нажмите на кнопку и tadaa ~ вся форма сбрасывается;) блестящий!
Используя функцию jquery .closest (element) и .find (...).
Получение родительского элемента и поиск его.
Наконец, выполните функцию необходимо
$("#form").closest('form').find("input[type=text], textarea").val("");
-
1Хотя этот блок кода может ответить на вопрос, вы всегда должны дать некоторое объяснение, почему оно это делает. – Sascha Wolf 25 February 2015 в 08:30
reset(){
this.companyForm["enable"] = true;
jQuery('has-success').each(function () {
jQuery(this).removeClass('has-success');
});
jQuery('.has-error').each(function () {
jQuery(this).removeClass('has-error');
});
jQuery('.has-feedback').each(function () {
jQuery(this).removeClass('has-feedback');
});
jQuery('.help-block').each(function () {
jQuery(this).hide();
});
jQuery('.form-control-feedback').each(function () {
jQuery(this).hide();
});
}
-
1
-
2
Вы можете просто добавить тип ввода = сброс с id = resetform, подобным этому
<html>
<form>
<input type = 'reset' id = 'resetform' value = 'reset'/>
<!--Other items in the form can be placed here-->
</form>
</html>
, а затем с jquery вы просто используете функцию .click () для элемента с id = resetform as следует за
<script>
$('#resetform').click();
</script>
и сбрасывает форму Примечание: вы также можете скрыть кнопку сброса с id = resetform с помощью css
<style>
#resetform
{
display:none;
}
</style>
-
1Не забудьте скрыть это ... чтобы сделать его более современной формой. & lt; input type = 'reset' id = 'reset form' value = 'reset' / style = 'display: none;' & gt; – mangas 6 March 2018 в 14:17
Я использую этот простой код:
//reset form
$("#mybutton").click(function(){
$("#myform").find('input:text, input:password, input:file, select, textarea').val('');
$("#myform").find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
});
-
1
Ваш код должен работать. Убедитесь, что существует static/jquery-1.9.1.min.js. Кроме того, вы можете попробовать вернуться к static/jquery.min.js. Если это устраняет проблему, то вы выявили проблему.
-
1Единственная проблема, о которой я могу думать, это то, что у вас есть другая форма с тем же идентификатором (
configform). Вы должны провести некоторое расследование с помощью консоли. Сначала попробуем$. Если вы используете Chrome, набрав$в консоли, активирует контекстно-зависимый список, если загружается jQuery. Если вы наберете$и нажмите «возврат», он будет оценивать функцию, если загружается jQuery. Затем попробуйте$("#configform"). Щелкните правой кнопкой мыши по результату и выберитеReveal in Elements panel. – ic3b3rg 9 May 2013 в 13:38 -
2спасибо :), но у меня нет хрома. это то же самое сделать с помощью firebug? (я его установил, но никогда не использовал его раньше) – yvonnezoe 10 May 2013 в 01:59
Согласно этому сообщению здесь , jQuery не имеет метода reset(); но родной JavaScript делает. Итак, преобразуйте элемент jQuery в объект JavaScript с помощью:
$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
-
1Он работает, и я согласен, jQuery не имеет метода reset (). Вы можете увидеть, как это сделать с помощью встроенного JavaScript в w3school doc: w3schools.com/jsref/met_form_reset.asp – serfer2 26 June 2014 в 09:20
-
2Я хотел бы отметить, что это будет только сбросить форму, а не очистить ее. I.e, если форма имеет значения, отправленные с запросом, они будут восстановлены. – Protector one 10 December 2014 в 13:57
-
3Я хотел бы добавить комментарий относительно заполнителя, первоначальный визуализатор формы, элементы формы имеют значения placeholder, после этого сброса, независимо от того, что было показано в месте, но значение становится пустым, поэтому будьте внимательны при проверке формы. Я добавлял валидацию общей формы для проверки значения заполнитель по умолчанию. – Ramratan Gupta 6 January 2016 в 07:18
<button type="reset">Reset</reset>
Проще всего я могу подумать, что это надежный. Место в теге формы.
Это одна из тех вещей, которые на самом деле проще сделать в javascript, чем jQuery. jQuery не имеет метода reset, но элемент формы HTML делает это, поэтому вы можете сбросить все поля в форме, подобной этой:
document.getElementById('configform').reset();
Если вы сделаете это через jQuery (как видно в других ответах здесь: $('#configform')[0].reset()), [0] извлекает тот же самый элемент формы DOM, который вы получите непосредственно через document.getElementById. Последний подход является одновременно более эффективным и простым (поскольку с помощью подхода jQuery вы сначала получаете коллекцию, а затем должны извлекать из нее элемент, тогда как с помощью javascript с помощью ванилин вы просто получаете элемент напрямую).
Кнопка сброса вообще не требует никакого скрипта (или имя или идентификатор):
<input type="reset">
, и все готово. Но если вы действительно должны использовать скрипт, обратите внимание, что каждый элемент управления формы имеет свойство form , которое ссылается на форму, в которой он находится, поэтому вы можете сделать:
<input type="button" onclick="this.form.reset();">
Но кнопка сброса это гораздо лучший выбор.
-
1u означает просто, что эта линия будет делать? o.O, так ли мой html выше правильно? – yvonnezoe 9 May 2013 в 03:31
-
2
-
3Определить «не работает». Какая у вас ошибка? Что не работает? Кнопки сброса были частью HTML-форм навсегда, они работают. – RobG 9 May 2013 в 09:31
-
4& quot; не работает & quot; - он ничего не сбрасывает, никаких изменений в форме не было. – yvonnezoe 10 May 2013 в 01:57
-
5Следует отметить, что «сброс» не означает, что «моя форма очищена». Что означает семантика «сброса» на самом деле это возврат всей формы & quot; элементов обратно к их первоначальному значению " атрибутов. Это смутило меня хотя бы на несколько минут! – jocull 12 October 2016 в 20:27
вы можете попробовать использовать trigger () Ссылка Ссылка
$('#form_id').trigger("reset");
-
1
-
2
$('#configreset').click(function(){
$('#configform')[0].reset();
});
Поместите его в скрипт JS. Работали по назначению.
Таким образом, ни одна из вышеупомянутых проблем не виновата здесь. Может быть, у вас проблема с конфликтом? Выполняется ли клик?
Изменить: (потому что я грустный мешок без надлежащей способности комментирования). Это не проблема непосредственно с вашим кодом. Он отлично работает, когда вы вынимаете его из контекста используемой вами страницы, поэтому вместо того, чтобы быть чем-то с конкретным jQuery / javascript & amp; Приписываемые данные формы, это должно быть что-то еще. Я бы начал делить пополам код вокруг него и попытаться найти, где он происходит. Я имею в виду, просто «убедитесь», я полагаю, вы могли бы ...
console.log($('#configform')[0]);
в функции щелчка и убедиться, что он нацелен на правильную форму ...
и
edit part 2: Одна вещь, которую вы могли бы попробовать (если она не нацелилась на нее правильно), используется «input: reset» вместо того, что вы используете ... также, я бы предположил, потому что это не та цель, которая неправильно работает, чтобы выяснить, на что нацелен фактический клик. Просто откройте инструменты firebug / developer, whathave you, бросьте в
console.log($('#configreset'))
и посмотрите, что всплывает. и тогда мы можем идти оттуда.
-
1не конфликтующий ID :( Я пытаюсь выбрать слой за слоем и проверить, работает ли клик – yvonnezoe 9 May 2013 в 03:16
-
2hmm кажется, что клик не работает! Я добавил
$('#ptest').html("clicked reset")в клик (function () {}); где он должен показывать «щелчок по сбросу», но он не появился – yvonnezoe 9 May 2013 в 03:22 -
3У меня есть вопрос здесь. каждый раз, когда я использую console.log, я понятия не имею, где его искать. Я использую Python IDLE и терминал для запуска скрипта python. в нем находится javascript. в любом случае, когда я использую `alert ($ ('# configform') [0]), он дает мне [объект HTMLFormElement] – yvonnezoe 9 May 2013 в 03:33
-
4Попробуйте использовать alert (JSON.stringify ($ '# configform') [0])). Alert не очень-то подходит для довольно печатных объектов (или говорит вам, что в нем). Это просто дает вам знать, что это объект. – tadiou 9 May 2013 в 03:41
-
5@DylanChensky магия jQuery заключается в том, что все это набор (массив). Так же, как если бы вы использовали обычный массив в jQuery
[0], выбирается первый элемент. Но в jQuery он выбирает фактический html элемента. Таким образом,[0]предоставляет вам html, который позволяет вам вызывать метод html, а не jQuery, называемыйreset. Дополнительную информацию см. В ответе @kevin. – tadiou 10 July 2016 в 12:59
formбыл автоматически закрыт в началеtbody, исключая входные элементы. – drzaus 13 February 2014 в 20:31