it-roy-ru.com

Очистить поля формы с помощью jQuery

Я хочу очистить все поля ввода и textarea в форме. Это работает следующим образом при использовании кнопки ввода с классом reset:

$(".reset").bind("click", function() {
  $("input[type=text], textarea").val("");
});

Это очистит все поля на странице, а не только поля формы. Как бы выглядел мой селектор только для той формы, в которой живет кнопка фактического сброса?

355
tbuehlmann
$(".reset").click(function() {
    $(this).closest('form').find("input[type=text], textarea").val("");
});
445
ShaneBlake

Для 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 () .

583
ngen

По какой причине это не должно быть использовано?

$("#form").trigger('reset');
142
user768680

Это не будет обрабатывать случаи, когда поля ввода формы имеют непустые значения по умолчанию.

Что-то вроде должно работать

$('yourdiv').find('form')[0].reset();
59
parapura rajkumar

если вы используете селекторы и задаете значения для очистки значений, это не сбрасывает форму, а делает все поля пустыми. Сброс состоит в том, чтобы сделать форму такой, какой она была до каких-либо действий пользователя по редактированию после загрузки формы со стороны сервера. Если есть вход с именем «username» и это имя пользователя было предварительно заполнено со стороны сервера, большинство решений на этой странице будут удалять это значение из ввода, а не сбрасывать его до значения, которое было до изменений пользователя. Если вам нужно сбросить форму, используйте это:

$('#myform')[0].reset();

если вам не нужно сбрасывать форму, а заполнять все входные данные некоторым значением, например, пустым значением, тогда вы можете использовать большинство решений из других комментариев.

46
Lukas

Просто, но работает как шарм.

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS
28
jroi_web

Если кто-то все еще читает эту ветку, вот самое простое решение, использующее не jQuery, а простой JavaScript. Если ваши поля ввода находятся внутри формы, есть простая команда сброса JavaScript:

document.getElementById("myform").reset();

Подробнее об этом здесь: http://www.w3schools.com/jsref/met_form_reset.asp

Ура!

27
Tarmo Saluste
$('form[name="myform"]')[0].reset();
20
apen

Почему это вообще нужно делать с любым 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('');
});
15
Matt Ball

Если вы хотите очистить все поля ввода независимо от их типа, то шаг за шагом 

 $('#MyFormId')[0].reset();
11
sunshine

Я получил самый простой трюк для сброса формы

jQuery("#review-form")[0].reset();

или же 

$("#review-form").get().reset();
11
mumair

С Javascript вы можете просто сделать это с помощью этого синтаксиса getElementById("your-form-id").reset();

вы также можете использовать jquery, вызывая функцию сброса таким образом $('#your-form-id')[0].reset();

Не забудьте не забыть [0]. Вы получите следующую ошибку, если 

Ошибка типа: $ (...). Сброс не является функцией

JQuery также предоставляет событие, которое вы можете использовать

$ ( '# Form_id') триггер ( "сброс").

Я пытался, и это работает.

Примечание: важно заметить, что эти методы только сбрасывают вашу форму к ее начальному значению, установленному сервером при загрузке страницы. Это означает, что если ваш ввод был установлен на значение 'set value' до того, как вы сделали случайное изменение, поле будет сброшено на то же значение после вызова метода сброса.

Надеюсь, поможет

10
BoCyrill
$('#editPOIForm').each(function(){ 
    this.reset();
});

где editPOIForm - это атрибут id вашей формы.

6
Knowledge Serve

Протестированный и проверенный код:

  $( document ).ready(function() {
    $('#messageForm').submit(function(e){
       e.preventDefault();
    });
    $('#send').click(function(e){
      $("#messageForm")[0].reset();
    });
  });

Javascript должен быть включен в $(document).ready и должен соответствовать вашей логике.

5
DeepCode

Почему вы не используете document.getElementById("myId").reset();? это простой и красивый

5
Carlos Alvarez

Самое простое и лучшее решение -
$("#form")[0].reset();

Не используйте здесь -
$(this)[0].reset();

3
Mamun Sabuj

Я использую это:

$(".reset").click(function() {
  $('input[type=text]').each(function(){
     $(this).val('');
  });
});

И вот моя кнопка:

<a href="#" class="reset">
  <i class="fa fa-close"></i>
     Reset
</a>
3
Matheno

Допустим, если вы хотите очистить поля и, кроме accountType, в раскрывающемся списке среднее время будет сброшено определенное значение, т. Е. «Все». Остальные поля должны быть сброшены в пустое, т. Е. Текстовое поле. Этот подход будет использоваться для очистки конкретные поля как наше требование.

 $(':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';
     }
 });
3
Gnanasekaran Ebinezar

Используйте этот код, где вы хотите вызвать функцию обычного сброса с помощью jQuery

setTimeout("reset_form()",2000);

И напиши эту функцию из сайта jQuery на готовый документ

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>
1
Monzur
@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
    OnSuccess = "ClearInput",
    HttpMethod = "Post",
    UpdateTargetId = "defect-list",
    InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" })) 
  1. frmID - это идентификация формы
  2. OnSuccess операции мы вызываем функцию JavaScript с именем "ClearInput"

    <script type="text/javascript">
        function ClearInput() {
            //call action for render create view
            $("#frmID").get(0).reset();
        }
    </script>
    
  3. если вы оба сделаете это правильно, то вы не сможете остановить его от работы ...

1
L.W.C. Nirosh

Следующий код очищает всю форму, и ее поля будут пустыми. Если вы хотите очистить только определенную форму, если страница содержит более одной формы, укажите идентификатор или класс формы.

$("body").find('form').find('input,  textarea').val('');
0
shivaP

Я написал универсальный плагин 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>

0
Jekis

Ничто из вышеперечисленного не работает в простом случае, когда страница включает в себя вызов пользовательского веб-элемента управления, который включает обработку запроса IHttpHandler (captcha) . После отправки requsrt (для обработки изображений) приведенный ниже код не очищает поля в Форма (до отправки запроса HttpHandler) все работает правильно.

<input type="reset"  value="ClearAllFields" onclick="ClearContact()" />

 <script type="text/javascript">
       function ClearContact() {
           ("form :text").val("");
       }
    </script>
0
user2366666

Если я хочу очистить все поля, кроме accountType .. Используйте следующее

$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');
0
Gnansekaran Ebinezar

код, который я вижу здесь и на связанных 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()) })

Пожалуйста, дайте мне знать, если я что-то упустил или что-то может быть улучшено.

0
Rafael Kitover