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

Question

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

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

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

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

335

forms html jquery

автор: Elnur Abdurrakhimov

27 ответов

автор: ShaneBlake · Accepted Answer · 2011-06-15 21:04:06

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

автор: ngen · Accepted Answer · 2018-04-26 01:45:55

для 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 () метод.

автор: user768680 · Accepted Answer · 2013-03-17 18:45:57

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

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

автор: parapura rajkumar · Accepted Answer · 2011-06-15 21:03:43

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

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

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

автор: Lukas · Accepted Answer · 2014-10-18 18:30:11

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

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

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

автор: jroi_web · Accepted Answer · 2014-06-03 04:24:59

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

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

автор: Tarmo Saluste · Accepted Answer · 2018-01-03 08:29:33

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

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

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

Ура!

автор: apen · Accepted Answer · 2015-06-01 03:53:59

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

20

автор: apen

автор: Matt Ball · Accepted Answer · 2013-12-27 14:36:51

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

автор: mumair · Accepted Answer · 2016-03-17 10:04:36

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

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

или

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

автор: sunshine · Accepted Answer · 2017-06-01 12:43:16

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

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

автор: BoCyrill · Accepted Answer · 2016-09-01 18:36:01

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

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

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

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

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

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

я попробовал и это завод.

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

надеюсь, что это помогает

автор: Knowledge Serve · Accepted Answer · 2013-07-17 12:01:12

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

здесь editPOIForm это id атрибут вашей формы.

автор: Carlos Alvarez · Accepted Answer · 2015-12-23 13:02:18

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

автор: DeepCode · Accepted Answer · 2017-02-02 11:40:51

проверенный и проверенный код:

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

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

автор: Matheno · Accepted Answer · 2015-04-17 10:46:47

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

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

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

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

автор: Gnanasekaran Ebinezar · Accepted Answer · 2012-05-31 09:09:12

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

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

автор: Mamun Sabuj · Accepted Answer · 2018-03-19 07:40:19

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

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

автор: Monzur · Accepted Answer · 2013-04-22 20:33:44

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

setTimeout("reset_form()",2000);

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

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

автор: L.W.C. Nirosh · Accepted Answer · 2014-10-14 13:04:54

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

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

автор: Gnansekaran Ebinezar · Accepted Answer · 2012-05-29 11:39:42

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

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

автор: Rafael Kitover · Accepted Answer · 2013-03-28 20:22:05

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

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

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

автор: user2366666 · Accepted Answer · 2013-05-09 14:29:03

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

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

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

автор: Jekis · Accepted Answer · 2016-06-30 23:15:22

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

автор: shivaP · Accepted Answer · 2017-11-04 11:19:52

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

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

автор: Jayan.C.A · Accepted Answer · 2013-02-05 10:25:38

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

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

автор: Júnior Mendonça · Accepted Answer · 2013-04-19 13:04:33

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

var el = $(this);

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

return false;

});