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

Question

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

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

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

var el = $(this);

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

return false;

});

Answer 5

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

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

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

Answer 6

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

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

Answer 7

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