Я хочу очистить все поля ввода и textarea в форме. Он работает следующим образом при использовании кнопки ввода с классом reset:
$(".reset").bind("click", function() {
$("input[type=text], textarea").val("");
});
Это очистит все поля на странице, а не только те из формы. Как бы мой селектор выглядел как только форма, в которой живет фактическая кнопка reset?
$(".reset").click(function() {
$(this).closest('form').find("input[type=text], textarea").val("");
});
Для jQuery 1. 6+:
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.prop('checked', false)
.prop('selected', false);
Для jQuery <1.6:
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
Пожалуйста, смотрите этот пост: Сброс многоступенчатой формы с помощью jQuery
Или же
$('#myform')[0].reset();
Как предлагает jQuery:
Чтобы получить и изменить свойства DOM, такие как
checked,selectedилиdisabledсостояние элементов формы, используйте метод .prop().
По какой причине это не должно использоваться?
$("#form").trigger('reset');
Это не будет обрабатывать случаи, когда поля ввода формы имеют непустые значения по умолчанию.
Что-то вроде должно работать
$('yourdiv').find('form')[0].reset();
если вы используете селекторы и делаете значения пустыми значениями, это не сбрасывает форму, делая все поля пустыми. Reset заключается в том, чтобы сделать форму, как это было до любых действий по редактированию от пользователя после загрузки формы со стороны сервера. Если есть вход с именем "имя пользователя" и что имя пользователя было предварительно заполнено со стороны сервера, большинство решений на этой странице будут удалять это значение из ввода, а не Reset, до значения, которое было до изменения пользователя. Если вам нужна форма Reset, используйте следующую команду:
$('#myform')[0].reset();
если вам не нужна форма Reset, но заполните все входы некоторым значением, например пустым значением, тогда вы можете использовать большинство решений из других комментариев.
Простой, но работает как шарм.
$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS
Если кто-то все еще читает этот поток, вот самое простое решение, использующее не jQuery, а обычный JavaScript. Если ваши поля ввода находятся внутри формы, существует простая команда JavaScript reset:
document.getElementById("myform").reset();
Подробнее об этом здесь: http://www.w3schools.com/jsref/met_form_reset.asp
Ура!
$('form[name="myform"]')[0].reset();
Почему это нужно делать с любым JavaScript вообще?
<form>
<!-- snip -->
<input type="reset" value="Reset"/>
</form>
http://www.w3.org/TR/html5/the-input-element.html#attr-input-type-keywords
Сначала попробовал это, он не очистит поля со значениями по умолчанию.
Здесь можно сделать это с помощью jQuery, затем:
$('.reset').on('click', function() {
$(this).closest('form').find('input[type=text], textarea').val('');
});
Я получил самый легкий трюк в форме reset
jQuery("#review-form")[0].reset();
или
$("#review-form").get().reset();
Если вы хотите очистить все поля ввода независимо от их типа, то это минутный шаг на
$('#MyFormId')[0].reset();
С помощью Javascript вы можете просто сделать это с помощью этого синтаксиса getElementById("your-form-id").reset();
вы также можете использовать jquery, вызвав функцию reset таким образом $('#your-form-id')[0].reset();
Помните, не забывайте [0]. Вы получите следующую ошибку, если
TypeError: $(...). reset не является функцией
JQuery также предоставляет событие, которое вы можете использовать
$( '# form_id') триггер ( "reset" );.
Я пробовал, и он работает.
Примечание. Важно отметить, что эти методы только reset составляют вашу форму до их первоначального значения, заданного сервером при загрузке страницы. Это означает, что если ваш ввод был установлен на значение "установленное значение" перед случайным изменением, поле будет reset до того же значения после вызова метода reset.
Надеюсь, что это поможет
$('#editPOIForm').each(function(){
this.reset();
});
где editPOIForm - это атрибут id вашей формы.
Почему вы не используете document.getElementById("myId").reset();? это простой и красивый
Протестированный и проверенный код:
$( document ).ready(function() {
$('#messageForm').submit(function(e){
e.preventDefault();
});
$('#send').click(function(e){
$("#messageForm")[0].reset();
});
});
Javascript должен быть включен в $(document).ready, и он должен быть с вашей логикой.
Самое простое и лучшее решение - $("#form")[0].reset();
Не используйте здесь - $(this)[0].reset();
Скажем, если вы хотите очистить поля и за исключением типа accountType, в раскрывающемся списке времени будет reset до определенного значения, то есть "All'.Remaining fields должно быть reset для пустого, т.е. текстового поля. Этот подход будет использоваться для очистки определенных полей в качестве нашего требования.
$(':input').not('#accountType').each( function() {
if(this.type=='text' || this.type=='textarea'){
this.value = '';
}
else if(this.type=='radio' || this.type=='checkbox'){
this.checked=false;
}
else if(this.type=='select-one' || this.type=='select-multiple'){
this.value ='All';
}
});
Я использую это:
$(".reset").click(function() {
$('input[type=text]').each(function(){
$(this).val('');
});
});
И вот моя кнопка:
<a href="#" class="reset">
<i class="fa fa-close"></i>
Reset
</a>
Используйте этот код, где вы хотите вызывать Normal Reset Функция jQuery
setTimeout("reset_form()",2000);
И напишите эту функцию на сайте jQuery в готовом документе
<script>
function reset_form()
{
var fm=document.getElementById('form1');
fm.reset();
}
</script>
@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
OnSuccess = "ClearInput",
HttpMethod = "Post",
UpdateTargetId = "defect-list",
InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" }))
frmID - это идентификация формы OnSuccess операции, которую мы называем функцией JavaScript с именем "ClearInput"
<script type="text/javascript">
function ClearInput() {
//call action for render create view
$("#frmID").get(0).reset();
}
</script>
если вы сделаете оба этих права, вы не сможете остановить его от работы...
Если я хочу очистить все поля, кроме accountType... Используйте следующие
$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');
код, который я вижу здесь, и связанные с ним вопросы SO кажутся неполными.
Сброс формы означает установку исходных значений из HTML, поэтому я собрал это вместе для небольшого проекта, который я делал, основываясь на приведенном выше коде:
$(':input', this)
.not(':button, :submit, :reset, :hidden')
.each(function(i,e) {
$(e).val($(e).attr('value') || '')
.prop('checked', false)
.prop('selected', false)
})
$('option[selected]', this).prop('selected', true)
$('input[checked]', this).prop('checked', true)
$('textarea', this).each(function(i,e) { $(e).val($(e).html()) })
Пожалуйста, дайте мне знать, если я пропущу что-либо или что-то еще можно улучшить.
Ни одно из указанных выше не работает в простом случае, когда страница включает вызов веб-пользовательского элемента управления, который включает обработку запроса IHttpHandler (captcha). После отправки requsrt (для обработки изображений) код ниже не очищает поля формы (перед отправкой запроса HttpHandler), все работает правильно.
<input type="reset" value="ClearAllFields" onclick="ClearContact()" />
<script type="text/javascript">
function ClearContact() {
("form :text").val("");
}
</script>
Я написал универсальный плагин jQuery:
/**
* Resets any input field or form
*/
$.fn.uReset = function () {
return this.filter('form, :input').each(function () {
var input = $(this);
// Reset the form.
if (input.is('form')) {
input[0].reset();
return;
}
// Reset any form field.
if (input.is(':radio, :checkbox')) {
input.prop('checked', this.defaultChecked);
} else if (input.is('select')) {
input.find('option').each(function () {
$(this).prop('selected', this.defaultSelected);
});
} else if (this.defaultValue) {
input.val(this.defaultValue);
} else {
console.log('Cannot reset to default value');
}
});
};
$(function () {
// Test jQuery plugin.
$('button').click(function (e) {
e.preventDefault();
var button = $(this),
inputType = button.val(),
form = button.closest('form');
if (inputType === 'form') {
form.uReset()
} else {
$('input[type=' + inputType + '], ' + inputType, form).uReset();
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Form</h3>
<form>
<input type="text" value="default"/><br /><br />
Ch 1 (default checked) <input type="checkbox" name="color" value="1" checked="checked" /><br />
Ch 2 <input type="checkbox" name="color" value="2" /><br />
Ch 3 (default checked) <input type="checkbox" name="color" value="3" checked="checked" /><br /><br />
<select name="time"><br />
<option value="15">15</option>
<option selected="selected" value="30">30</option>
<option value="45">45</option>
</select><br /><br />
R 1 <input type="radio" name="color" value="1" /><br />
R 2 (default checked) <input type="radio" name="color" value="2" checked="checked" /><br />
R 3 <input type="radio" name="color" value="3" /><br /><br />
<textarea>Default text</textarea><br /><br />
<p>Play with form values and then try to reset them</p>
<button type="button" value="text">Reset text input</button>
<button type="button" value="checkbox">Reset checkboxes</button>
<button type="button" value="select">Reset select</button>
<button type="button" value="radio">Reset radios</button>
<button type="button" value="textarea">Reset textarea</button>
<button type="button" value="form">Reset the Form</button>
</form>Следующий код очищает всю форму, и поля будут пустыми. Если вы хотите удалить только конкретную форму, если страница имеет более одной формы, укажите номер или класс формы
$("body").find('form').find('input, textarea').val('');
попробуй это
$("input[type=text], textarea").val("");
Добавьте скрытую reset кнопку следующим образом
<input id="resetBtn" type="reset" value="reset" style="display:none" />
// Call reset buttons click event
// Similar to ClearInputs('resetBtn');
function ClearInputs(btnSelector) {
var btn = $("#" + btnSelector);
btn.click();
}
$('form'). submit (function() {
var el = $(this);
$('<button type="reset" style="display:none; "></button>')
.appendTo(el)
.click()
.remove()
;
return false;
});