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

Пожалуйста, смотрите это сообщение: Сброс многоступенчатой ​​формы с помощью jQuery

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

или

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

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

$("#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 ).ready(function() {
    $('#messageForm').submit(function(e){
       e.preventDefault();
    });
    $('#send').click(function(e){
      $("#messageForm")[0].reset();
    });
  });

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

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

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

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

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

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

Скажем, если вы хотите очистить поля и за исключением типа 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';
     }
 });

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

• если вы сделаете оба этих права, вы не сможете остановить его от работы...

Используйте этот код, где вы хотите вызывать Normal Reset Функция jQuery

setTimeout("reset_form()",2000);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$('form'). submit (function() {

var el = $(this);

$('<button type="reset" style="display:none; "></button>')
    .appendTo(el)
    .click()
    .remove()
;

return false;

});

Добавьте скрытую 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();
}