jquery - формы - удалить значение input




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

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

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

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


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

var el = $(this);

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

return false;

});


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

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

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

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

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

Ура!


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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

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

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

$('yourdiv').find('form')[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>


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

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

или же

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

код, который я вижу здесь, и связанные с ним вопросы 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()) })

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


Для 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() .


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

где editPOIForm - это атрибут id вашей формы.


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




forms