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




Сброс многоступенчатой формы с помощью jQuery (20)

У меня есть форма со стандартной кнопкой сброса, закодированной таким образом:

<input type="reset" class="button standard" value="Clear" />

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

Я думаю, что привязка функции jQuery к петле над всеми полями и очистка их «вручную» сделала бы трюк. Я уже использую jQuery в форме, но я просто получаю скорость и поэтому не уверен, как это сделать, кроме как индивидуально ссылаясь на каждое поле по ID, что не кажется очень эффективным.

TIA за любую помощь.


обновлено в марте 2012 года.

Итак, через два года после того, как я изначально ответил на этот вопрос, я возвращаюсь, чтобы увидеть, что он в значительной степени превратился в большой беспорядок. Я чувствую, что пришло время, когда я вернусь к нему и сделаю свой ответ по-настоящему правильным, так как он является самым популярным + принят.

Для записи ответ Тити ошибочен, поскольку это не то, о чем попросил первоначальный плакат, - правильно, что можно сбросить форму с использованием встроенного метода reset (), но этот вопрос пытается очистить форму от запомненных значения, которые останутся в форме, если вы сбросите ее таким образом. Вот почему необходим «ручной» сброс. Я предполагаю, что большинство людей попали в этот вопрос из поиска Google и действительно ищут метод reset (), но он не работает для конкретного случая, о котором говорит OP.

Мой первоначальный ответ был таков:

// not correct, use answer below
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');

Это может работать во многих случаях, в том числе для OP, но, как указано в комментариях и в других ответах, очистит элементы радио / флажка от любых атрибутов значений.

Более правильный ответ (но не идеальный):

function resetForm($form) {
    $form.find('input:text, input:password, input:file, select, textarea').val('');
    $form.find('input:radio, input:checkbox')
         .removeAttr('checked').removeAttr('selected');
}

// to call, use:
resetForm($('#myform')); // by id, recommended
resetForm($('form[name=myName]')); // by name

Использование селекторов :text :radio и т. Д. Сами по себе считается плохой практикой с помощью jQuery, поскольку они в конечном итоге оценивают *:text который заставляет его заняться гораздо дольше, чем нужно. Я предпочитаю использовать белый список и хочу, чтобы я использовал его в своем первоначальном ответе. Во всяком случае, указав input часть селектора, а также кеш элемента формы, это должно сделать его наилучшим для выполнения ответа здесь.

Этот ответ может по-прежнему иметь некоторые недостатки, если по умолчанию для избранных элементов люди не являются опцией, которая имеет пустое значение, но она, разумеется, такая же общая, как и она, и это нужно будет обрабатывать в каждом конкретном случае ,


document.getElementById ( 'FRM'). сброс ()


Вот вам, чтобы вы начали

$('form') // match your correct form 
.find('input[type!=submit], input[type!=reset]') // don't reset submit or reset
.val(''); // set their value to blank

Конечно, если у вас есть флажки / переключатели, вам необходимо изменить это, чтобы включить их также и установить .attr({'checked': false});

Ответ Паоло более краткий. Мой ответ более многословен, потому что я не знал о селекторе :input и не думал об удалении проверенного атрибута.


Все эти ответы хороши, но самый простой способ сделать это - с поддельным сбросом, то есть вы используете ссылку и кнопку сброса.

Просто добавьте CSS, чтобы скрыть реальную кнопку сброса.

input[type=reset] { visibility:hidden; height:0; padding:0;}

И затем по вашей ссылке вы добавляете следующее

<a href="javascript:{}" onclick="reset.click()">Reset form</a>

<input type="reset" name="reset" id="reset" /><!--This input button is hidden-->

Надеюсь это поможет! A.


Здесь с обновлением для флажков и выбора:

$('#frm').find('input:text, input:password, input:file, textarea').val('');
$('#frm').find('input:radio, input:checkbox').attr("checked",false).checkboxradio("refresh");
$('#frm').find('select').val('').selectmenu('refresh');

Метод, который я использовал в довольно большой форме (поля 50+), состоял в том, чтобы просто перезагрузить форму с помощью AJAX, в основном обратившись к серверу и просто вернув поля со значениями по умолчанию. Это сделано намного проще, чем пытаться захватить каждое поле с помощью JS, а затем установить его значение по умолчанию. Это также позволило мне сохранить значения по умолчанию в одном месте - код сервера. На этом сайте также были разные значения по умолчанию в зависимости от настроек учетной записи, поэтому мне не пришлось беспокоиться о том, чтобы отправить их в JS. Единственная небольшая проблема, с которой мне пришлось столкнуться, - это некоторые предлагаемые поля, требующие инициализации после вызова AJAX, но не большая сделка.


На http://groups.google.com/group/jquery-dev/msg/2e0b7435a864beea :

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

установка myinput.val('') может не эмулировать «сброс» на 100%, если у вас есть такой ввод:

<input name="percent" value="50"/>

Например, вызов myinput.val('') на входе со значением по умолчанию, равным 50, установил бы его в пустую строку, тогда как вызов myform.reset() сбросил бы его до начального значения 50.


Обычно я делаю:

$('#formDiv form').get(0).reset()

или же

$('#formId').get(0).reset()

Ответ Паоло не учитывает выбор даты, добавьте это в:

$form.find('input[type="date"]').val('');

Очистка форм немного сложна и не так проста, как кажется.

Предложите использовать плагин формы jQuery и используйте его функции clearForm или resetForm . Он заботится о большинстве случаев в углу.


Просто используйте jQuery Trigger event следующим образом:

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

Это сбросит флажки, радиокнопки, текстовые поля и т. Д. По сути, эта форма превращает вашу форму в состояние по умолчанию. Просто #ID, Class, element внутри селектора jQuery .


Существует большая проблема с принятым ответом Паоло. Рассматривать:

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

Линия .val('') также очистит любое value , присвоенное флажкам и переключателям. Поэтому, если (как и я) вы делаете что-то вроде этого:

<input type="checkbox" name="list[]" value="one" />
<input type="checkbox" name="list[]" value="two" checked="checked" />
<input type="checkbox" name="list[]" value="three" />

Использование принятого ответа преобразует ваши входы в:

<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />
<input type="checkbox" name="list[]" value="" />

К сожалению, я использовал эту ценность!

Вот модифицированная версия, которая будет содержать ваши флажки и значения радио:

// Use a whitelist of fields to minimize unintended side effects.
$('INPUT:text, INPUT:password, INPUT:file, SELECT, TEXTAREA', '#myFormId').val('');  
// De-select any checkboxes, radios and drop-down menus
$('INPUT:checkbox, INPUT:radio', '#myFormId').removeAttr('checked').removeAttr('selected');

Я использовал решение ниже, и это сработало для меня (смешение традиционного javascript с jQuery)

$("#myformId").submit(function() {
    comand="window.document."+$(this).attr('name')+".reset()";
    setTimeout("eval(comando)",4000);
})

Я использую решение Paolo Bergantino, которое отлично, но с небольшим количеством настроек ... В частности, для работы с именем формы вместо id.

Например:

function jqResetForm(form){
   $(':input','form[name='+form+']')
   .not(':button, :submit, :reset, :hidden')
   .val('')
   .removeAttr('checked')
   .removeAttr('selected');
}

Теперь, когда я хочу использовать его,

<span class="button" onclick="jqResetForm('formName')">Reset</span>

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


Я просто являюсь промежуточным звеном в PHP и немного ленив, чтобы погрузиться в новый язык, такой как JQuery, но не следующее простое и элегантное решение?

<input name="Submit1" type="submit" value="Get free quote" />
<input name="submitreset" type="submit" value="Reset" />

Не вижу причины, почему у вас нет двух кнопок отправки, только с разными целями. Тогда просто:

if ($_POST['submitreset']=="Reset") {
$_source = "--Choose language from--";
$_target = "--Choose language to--"; }

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


Я сделал небольшое изменение хорошего решения Фрэнсиса Льюиса . То, что его решение не делает, - это то, что выпадающий список выбирается пустым. (Я думаю, что, когда большинство людей хотят «очистить», они, вероятно, хотят, чтобы все значения были пустыми.) Это делается с помощью .find('select').prop("selectedIndex", -1) .

$.fn.clear = function()
{
    $(this).find('input')
            .filter(':text, :password, :file').val('')
            .end()
            .filter(':checkbox, :radio')
                .removeAttr('checked')
            .end()
        .end()
    .find('textarea').val('')
        .end()
    .find('select').prop("selectedIndex", -1)
        .find('option:selected').removeAttr('selected')
    ;
    return this;
};

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

однако есть несколько свойств javascript, которые помогают:

  • defaultValue для текстовых полей
  • defaultChecked для флажков и переключателей
  • defaultSelected для выбора параметров

они сохраняют значение, которое поле имело при загрузке страницы.

Написание плагина jQuery теперь тривиально: (для нетерпеливых ... вот демонстрация http://jsfiddle.net/kritzikratzi/N8fEF/1/ )

плагин-код

(function( $ ){
    $.fn.resetValue = function() {  
        return this.each(function() {
            var $this = $(this); 
            var node = this.nodeName.toLowerCase(); 
            var type = $this.attr( "type" ); 

            if( node == "input" && ( type == "text" || type == "password" ) ){
                this.value = this.defaultValue; 
            }
            else if( node == "input" && ( type == "radio" || type == "checkbox" ) ){
                this.checked = this.defaultChecked; 
            }
            else if( node == "input" && ( type == "button" || type == "submit" || type="reset" ) ){ 
                // we really don't care 
            }
            else if( node == "select" ){
                this.selectedIndex = $this.find( "option" ).filter( function(){
                    return this.defaultSelected == true; 
                } ).index();
            }
            else if( node == "textarea" ){
                this.value = this.defaultValue; 
            }
            // not good... unknown element, guess around
            else if( this.hasOwnProperty( "defaultValue" ) ){
                this.value = this.defaultValue; 
            }
            else{
                // panic! must be some html5 crazyness
            }
        });
    }
} )(jQuery);

использование

// reset a bunch of fields
$( "#input1, #input2, #select1" ).resetValue(); 

// reset a group of radio buttons
$( "input[name=myRadioGroup]" ).resetValue(); 

// reset all fields in a certain container
$( "#someContainer :input" ).resetValue(); 

// reset all fields
$( ":input" ).resetValue(); 

// note that resetting all fields is better with the javascript-builtin command: 
$( "#myForm" ).get(0).reset(); 

некоторые заметки ...

  • я не рассматривал новые элементы формы html5, некоторым может потребоваться специальное лечение, но одна и та же идея должна работать.
  • элементы должны быть указаны напрямую. т.е. $( "#container" ).resetValue() не будет работать. всегда используйте $( "#container :input" ) .
  • как упоминалось выше, вот демонстрационная версия: http://jsfiddle.net/kritzikratzi/N8fEF/1/

вот мое решение, которое также работает с новыми типами ввода html5:

/**
 * removes all value attributes from input/textarea/select-fields the element with the given css-selector
 * @param {string} ele css-selector of the element | #form_5
 */
function clear_form_elements(ele) {
    $(ele).find(':input').each(function() {
        switch (this.type) {
            case 'checkbox':
            case 'radio':
                this.checked = false;
            default:
                $(this).val('');
                break;
        }
    });
}

Плагин jQuery

Я создал плагин jQuery, поэтому я могу легко его использовать в любом месте, где это необходимо:

jQuery.fn.clear = function()
{
    var $form = $(this);

    $form.find('input:text, input:password, input:file, textarea').val('');
    $form.find('select option:selected').removeAttr('selected');
    $form.find('input:checkbox, input:radio').removeAttr('checked');

    return this;
}; 

Теперь я могу использовать его, позвонив:

$('#my-form').clear();

$(this).closest('form').find('input,textarea,select').not(':image').prop('disabled', true);




html-form