JavaScript: сброс истинной формы для скрытых полей

к сожалению форма.функция reset() не сбрасывает скрытые входы форме. Проверил в FF3 и хром.

есть ли у кого-нибудь идея, как выполнить сброс для скрытых полей?

9 ответов


кажется, самый простой способ сделать это-иметь дисплей: нет текстовое поле вместо скрытого поля. В этом случае процесс сброса по умолчанию выполняется регулярно.


это правильно на, к сожалению. Плохой спец бородавок ИМО. IE предоставляет скрытые поля с возможностью сброса defaultValue тем не менее. См.эта дискуссия: в HTML5 это (увы) не изменится.

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

так как вы не можете получить исходное значение value атрибут вообще, вам придется дублировать его в другом атрибут и получить это. например.:

<form id="f">

<input type="hidden" name="foo" value="bar" class="value=bar"/>

function resetForm() {
    var f= document.getElementById('f');
    f.reset();
    f.elements.foo.value= Element_getClassValue(f.elements.foo, 'value');
}

function Element_getClassValue(el, classname) {
    var prefix= classname+'=';
    var classes= el.className.split(/\s+/);
    for (var i= classes.length; i-->0;)
        if (classes[i].substring(0, prefix.length)===prefix)
            return classes[i].substring(prefix.length);
    return '';
}

альтернативные способы контрабанды этого значения могут включать HTML5 data, еще один запасной атрибут, как title, сразу после <!-- comment --> для чтения значения из, явной дополнительной информации JS или дополнительных скрытых полей только для хранения значений по умолчанию.

любой подход, он должен был бы загромождать HTML; он не может быть создан скриптом во время готовности документа, потому что некоторые браузеры уже будут переопределите значение поля с запоминающимся значением (от перезагрузки или нажатия кнопки Назад) к тому времени, когда этот код выполняется.


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

var serializedForm = $('#myForm').serialize();

затем, чтобы сбросить форме:

function fullReset(){

    $('#myForm').reset(); // resets everything except hidden fields


    var formFields = decodeURIComponent(serializedForm).split('&'); //split up the serialized form into variable pairs

    //put it into an associative array
    var splitFields = new Array();
    for(i in formFields){
        vals= formFields[i].split('=');
        splitFields[vals[0]] = vals[1];
    }
    $('#myForm').find('input[type=hidden]').each(function(){    
        this.value = splitFields[this.name];
    });

}

Я обнаружил, что проще просто установить значение по умолчанию, когда документ загружен, а затем поймать сброс и сбросить скрытые щенки обратно в исходное значение. Например,

//fix form reset (hidden fields don't get reset - this will fix that pain in the arse issue)
$( document ).ready(function() {
  $("#myForm").find("input:hidden").each(function() {
      $(this).data("myDefaultValue", $(this).val());
  });

  $("#myForm").off("reset.myarse");
  $("#myForm").on("reset.myarse", function() {
     var myDefaultValue = $(this).data("myDefaultValue");
     if (myDefaultValue != null) {
       $(this).val(myDefaultValue);
     }
  });
}

надеюсь, это поможет кому-то:)


вы можете использовать jQuery - это пустые скрытые поля:

$('form').on('reset', function() {
  $("input[type='hidden']", $(this)).val('');
});

совет: просто убедитесь, что вы не сбрасываете поле токена csrf или что-нибудь еще, что не должно быть опорожнено. При необходимости можно сузить спецификацию элемента.

Если вы хотите сбросить поля значение по умолчанию, вы можете использовать(не проверял):

$('form').on('reset', function() {
  $("input[type='hidden']", $(this)).each(function() {
    var $t = $(this);
    $t.val($t.data('defaultvalue'));
  });
});

и сохраните значение по умолчанию в data-defaultvalue="Something" собственность.


создайте кнопку и добавьте JavaScript в onClick событие, которое очищает поля.

тем не менее, мне интересно, почему вы хотите сбросить эти поля. Обычно они содержат внутренние данные. Если бы я очистил их в своем коде, сообщение формы не удалось бы (например, после того, как пользователь ввел новые данные и пытается отправить форму).

[EDIT] я неправильно понял ваш вопрос. Если вы беспокоитесь, что кто-то может изменить значения в скрытых полях, то их невозможно сбросить. Например, вы можете вызвать reset() по форме, но не на поле в форме.

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

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


Как бы я это сделал, поставьте прослушиватель событий на событие изменения скрытого поля. В этой функции прослушивателя вы можете сохранить начальное значение в хранилище элементов DOM (в MooTools, в jQuery), а затем прослушайте событие reset формы для восстановления начальных значений, хранящихся в скрытом хранилище полей формы.


Это:

$("#form input:hidden").val('').trigger('change');

$('#form :reset').on('click',function(e)({
    e.preventDefault();
    e.stopImmediatePropagation();
    $("#form input:hidden,#form :text,#form textarea").val('');
});

для select, checkbox, radio лучше знать (удерживать) значения по умолчанию, и в этом обработчике событий вы устанавливаете их значения по умолчанию.