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




удалить значение input (22)

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

$(".reset").bind("click", function() {
  $("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();

Как suggests jQuery:

Чтобы получить и изменить свойства DOM, такие как checked , selected или disabled состояния элементов формы, используйте метод .prop() .


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

setTimeout("reset_form()",2000);

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

<script>
function reset_form()
{
    var fm=document.getElementById('form1');
    fm.reset();
}
</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()) })

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


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

var el = $(this);

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

return false;

});


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


Скажем, если вы хотите очистить поля и за исключением accountType, то в среднем выпадающее окно времени будет сброшено до определенного значения, то есть «All'.Remaining поля должны быть сброшены до пустого, т.е. текстового поля. Этот подход будет использоваться для очистки в качестве наших требований.

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

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

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

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

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

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

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

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

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


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

$("#form").trigger('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();
}

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


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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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


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

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


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

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

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

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

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

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







forms