проблема со сбросом формы
Здравствуйте, кто-нибудь сталкивался с проблемой сброса значений по умолчанию у формы? А именно, после изменения скриптом значений полей типа text и hidden с помощью
document.getElementById(ElId).value=newValue и нажатия кнопки reset значения сбрасываются только у полей типа text(у Opera, FF, chrome), а у IE всё норм. На данный момент изменил все hidden на невидимые text, но не считаю это совсем правильным. Интересно мнение форумчан по этому вопросу, работа первых 3-х браузеров как-то объяснима? Или это баг? |
На самом деле это не проблема и у IE тут не всё норм, а всё как обычно - что хочу, то и делаю. Само предназначение кнопки - "очистить поля, измененные пользователем" говорит, что очищает она видимые элементы. Так что невидимые text инпуты - нормальное решение.
|
Спецификация http://www.w3.org/TR/REC-html40-9712...#initial-value
When activated, a reset button resets all controls to their initial values. Только что нашёл. Может у меня плохо с английским, но вроде речь идёт о всех элементах формы...=) |
можно удалить вручную:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<input class="clear" type="hidden" value="234" default-value="234111">
<input class="clear" type="text" value="2345" default-value="2345">
<textarea class="clear" default-value="25">25</textarea>
<input type="button" value="reset">
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$('form input:button').click(function()
{
$('form .clear').each(function(index, elem)
{
$(elem).val($(elem).attr('default-value'));
});
});
</script>
</body>
</html>
|
Цитата:
Цитата:
|
devote, давайте ссылаться на спецификации, а не на своё имхо, когда дело касается определений правил функционирования объектов:
17.2.1 Control types HTML defines the following control types: - buttons - checkboxes - radio buttons - menus - text input - file select - hidden controls - object controls skrudjmakdak, интересное решение, спасибо, попробую потом. Правда я jquery не пользуюсь пока, обходился без неё. Если несложно, можете написать откуда берутся index и elem в параметрах функции? |
Цитата:
Цитата:
http://jquery-docs.ru/utilities/jquery-each/ |
спасибо, а то хотел english-версию читать уже. С ним у меня не гладко, поэтому изрядно помогли.
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<input class="clear" type="hidden" value="234" default-value="234111">
<input class="clear" type="text" value="2345" default-value="2345">
<textarea class="clear" default-value="25">25</textarea>
<input type="button" value="reset" onclick="resetForm(this)">
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function resetForm(a) {
a = a.parentNode.getElementsByClassName('clear');
for(var i=0; i<a.length; i++) if(b) a[i].value = a[i].getAttribute('default-value');
}
</script>
</body>
</html>
Без jQuery. Не проверял, но работать должно. |
а можно просто написать небольшой Polyfill который будет исправлять данную проблему:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
document.addEventListener && document.addEventListener('DOMContentLoaded', function() {
var forms = document.getElementsByTagName('form');
for(var i = forms.length, form; form = forms[--i];) {
updateHidden(form);
form.addEventListener('reset', function(e) {
updateHidden(e.target);
}, false);
}
function updateHidden(form) {
var inputs = form.getElementsByTagName('input');
for(var i = inputs.length, input; input = inputs[--i];) {
if (input.type === 'hidden') {
if ('_defaultValue' in input) {
input.value = input._defaultValue;
} else {
input._defaultValue = input.value;
}
}
}
}
});
</script>
</head>
<body>
<form>
<input type="hidden" value="234">
<input type="text" value="2345">
<textarea>25</textarea>
<input type="reset" value="Сбросить">
</form>
</body>
</html>
|
| Часовой пояс GMT +3, время: 22:15. |