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

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

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

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

$(".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();

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

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

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

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

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

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

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('');
});

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

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

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

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

или

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

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

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

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

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

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

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

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

Примечание: важно отметить, что эти методы только сбрасывают вашу форму к ее начальному значению, установленному сервером при загрузке страницы. Это означает, что если ваш ввод был установлен на значение 'set value' до того, как вы сделали случайное изменение, поле будет сброшено на то же значение после вызова метода 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, в раскрывающемся списке среднее время будет сброшено определенное значение, т. Е. «Все». Остальные поля должны быть сброшены на пустое, т. Е. Текстовое поле. Этот подход будет использоваться для очистки конкретные поля как наше требование.

 $(':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>

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

setTimeout("reset_form()",2000);

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

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</script>

Некоторые из вас жаловались на то, что радиостанции и тому подобное очищены от «проверенного» состояния по умолчанию ... Все, что вам нужно сделать, это добавить переключатели: radio,: в поле .not, и проблема решена.

Если вы не можете заставить все другие функции сброса работать, эта будет.

• Адаптировано из ответа ngen

  function form_reset(formID){
      $(':input','#'+formID)
      .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
      .val('');
  }

@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. если вы оба сделаете это правильно, то вы не сможете остановить его от работы ...

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

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

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

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

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

Сброс формы означает установку исходных значений из 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 (капчу). После отправки 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>

Добавьте скрытую кнопку сброса следующим образом

<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;

});