Очистити поля форми за допомогою jQuery

Я хочу очистити всі поля введення та текстової області у формі. При використанні кнопки введення з resetкласом це працює наступним чином :

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

Це очистить усі поля на сторінці, а не лише ті, що знаходяться у формі. Як би виглядав мій перемикач лише тієї форми, в якій живе фактична кнопка скидання?

$(".reset").click(function() {
    $(this).closest('form').find("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();

Як пропонує jQuery :

Для того, щоб витягувати і змінювати властивості DOM , такі як checked, selectedабо disabledстан елементів форми, використовувати .prop () метод.

З якоїсь причини це не слід використовувати?

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

Це не обробляє випадки, коли поля введення форми мають непорожні значення за замовчуванням.

Щось подібне повинно працювати

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

якщо ви використовуєте селектори і робите значення порожніми значеннями, це не скидає форму, вона робить усі порожні поля. Скидання - це зробити форму такою, якою вона була до будь-яких дій редагування у користувача після завантаження форми з боку сервера. Якщо є вхід з ім'ям "ім'я користувача" і це ім'я користувача було попередньо заповнене з боку сервера, більшість рішень на цій сторінці видалить це значення з введення, а не скине його на значення, яким воно було до змін користувача. Якщо вам потрібно скинути форму, скористайтеся цим:

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

Якщо ви хочете спорожнити всі вхідні поля незалежно від його типу, це крок за хвилиною

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

Я отримав найпростіший трюк для скидання форми

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

або

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

З Javascript ви можете просто зробити це за допомогою цього синтаксису getElementById("your-form-id").reset();

Ви також можете використовувати jquery, викликавши функцію скидання таким чином $('#your-form-id')[0].reset();

Пам'ятайте, щоб не забути [0]. Ви отримаєте таку помилку, якщо

TypeError: $ (...) скидання не є функцією

JQuery також пропонує подію, яку можна використовувати

$ ('# form_id'). тригер ("скидання");

Я спробував, і це працює.

Примітка. Важливо зауважити, що ці методи лише скидають форму до початкового значення, встановленого сервером при завантаженні сторінки. Це означає, що якщо ваш вхід був встановлений на значення 'встановлене значення' перед тим, як ви зробили випадкову зміну, поле буде скинуто на те саме значення після виклику методу скидання.

Сподіваюся, це допомагає

$('#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і він повинен відповідати вашій логіці.

Найпростіше і найкраще рішення -
$("#form")[0].reset();

Не використовуйте тут -
$(this)[0].reset();

Скажімо, якщо ви хочете очистити поля та, окрім accountType, у середньому часі спадне поле буде скинуто до певного значення, тобто "All". Залишилися поля слід скинути до порожнього, тобто текстового поля. Цей підхід буде використаний для очищення конкретні поля як наша вимога.

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

Я використовую це:

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

І ось моя кнопка:

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

Використовуйте цей код там, де ви хочете викликати функцію нормального скидання від jQuery

setTimeout("reset_form()",2000);

І запишіть цю функцію jQuery сайту на документ "Готовий документ"

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

Деякі з вас скаржилися на те, що радіостанції та інші очищені від статусу "зареєстрований" за замовчуванням ... Все, що вам потрібно зробити, це додати:.

Якщо ви не можете змусити всі інші функції скидання працювати, ця буде.

• Адаптовано з відповіді ngen

  function form_reset(formID){
      $(':input','#'+formID)
      .not(':button',':submit',':reset',':hidden',':radio',':checkbox')
      .val('');
  }

@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. якщо ви зробите обидва ці права, то ви не зможете перешкодити йому працювати ...

У наступному коді очиститься вся форма, і поля будуть порожніми. Якщо ви хочете очистити лише певну форму, якщо сторінка має більше однієї форми, будь ласка, зазначте ідентифікатор або клас форми

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

Якщо я хочу очистити всі поля, крім 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>

Додати приховану кнопку скидання наступним чином

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

$ ('форма'). submit (функція () {

var el = $(this);

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

return false;

});