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

Ответ 1

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

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

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

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

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

Ответ 6

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

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

Ответ 7

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

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

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

Ура!

Ответ 8

$('form[name="myform"]')[0].reset();

Ответ 9

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

Ответ 10

Я получил самый легкий трюк в форме reset

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

или

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

Ответ 11

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

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

Ответ 12

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

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

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

TypeError: $(...). reset не является функцией

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

$( '# form_id') триггер ( "reset" );.

Я пробовал, и он работает.

Примечание. Важно отметить, что эти методы только reset составляют вашу форму до их первоначального значения, заданного сервером при загрузке страницы. Это означает, что если ваш ввод был установлен на значение "установленное значение" перед случайным изменением, поле будет reset до того же значения после вызова метода reset.

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

Ответ 13

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

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

Ответ 14

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

Ответ 15

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

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

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

Ответ 16

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

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

Ответ 17

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

Ответ 18

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

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

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

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

Ответ 19

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

setTimeout("reset_form()",2000);

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

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

Ответ 20

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

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

Ответ 21

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

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

Ответ 22

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

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

Ответ 23

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

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

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

Ответ 24

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

Ответ 25

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

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

Ответ 26

попробуй это

$("input[type=text], textarea").val("");

Ответ 27

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

Ответ 28

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

var el = $(this);

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

return false;

});