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

для jQuery 1.6+:

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

для jQuery :

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

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

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

или

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

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

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

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

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

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

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

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 и оно должно быть с вашей логикой.

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

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

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

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

скажем, если вы хотите очистить поля и кроме accountType, в раскрывающемся списке mean time будет сброшено определенное значение, т. е. "все".Остальные поля должны быть сброшены в пустое текстовое поле.Этот подход будет использоваться для очистки конкретных полей в качестве нашего требования.

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

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

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

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

setTimeout("reset_form()",2000);

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

<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" })) 

1. frmID это идентификация формы

2. OnSuccess операции мы вызываем функцию JavaScript с именем "ClearInput"

   <script type="text/javascript">
       function ClearInput() {
           //call action for render create view
           $("#frmID").get(0).reset();
       }
   </script>
   

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

Если я хочу очистить все поля, кроме 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 (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 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;

});