Форум

dimka_68 · #1 (**permalink**) 24.07.2013, 11:00

Здравствуйте, кто-нибудь сталкивался с проблемой сброса значений по умолчанию у формы? А именно, после изменения скриптом значений полей типа text и hidden с помощью

document.getElementById(ElId).value=newValue

и нажатия кнопки reset значения сбрасываются только у полей типа text(у Opera, FF, chrome), а у IE всё норм.
На данный момент изменил все hidden на невидимые text, но не считаю это совсем правильным. Интересно мнение форумчан по этому вопросу, работа первых 3-х браузеров как-то объяснима? Или это баг?

zilker · #2 (**permalink**) 24.07.2013, 11:53

На самом деле это не проблема и у IE тут не всё норм, а всё как обычно - что хочу, то и делаю. Само предназначение кнопки - "очистить поля, измененные пользователем" говорит, что очищает она видимые элементы. Так что невидимые text инпуты - нормальное решение.

dimka_68 · #3 (**permalink**) 24.07.2013, 12:51

Спецификация http://www.w3.org/TR/REC-html40-9712...#initial-value
When activated, a reset button resets all controls to their initial values.
Только что нашёл. Может у меня плохо с английским, но вроде речь идёт о всех элементах формы...=)

skrudjmakdak · #4 (**permalink**) 24.07.2013, 14:24

можно удалить вручную:

<!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 · #5 (**permalink**) 24.07.2013, 14:42

Сообщение от dimka_68

Может у меня плохо с английским, но вроде речь идёт о всех элементах формы...=)

Сообщение от dimka_68

resets all controls to their initial values.

слово controls уже говорит о контролах изменяемых пользователям. А тег INPUT с типом hidden не является контролом, а просто невидимым тегом имеющим некое значение.

dimka_68 · #6 (**permalink**) 24.07.2013, 15:11

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 в параметрах функции?

skrudjmakdak · #7 (**permalink**) 24.07.2013, 15:20

Сообщение от dimka_68

Правда я jquery не пользуюсь пока, обходился без неё.

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

Сообщение от dimka_68

можете написать откуда берутся index и elem в параметрах функции?

вот русская документация, в данной урле идет рассказ именно о функции each
http://jquery-docs.ru/utilities/jquery-each/

dimka_68 · #8 (**permalink**) 24.07.2013, 15:27

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

ruslan_mart · #9 (**permalink**) 24.07.2013, 16:53

<!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. Не проверял, но работать должно.

devote · #10 (**permalink**) 24.07.2013, 17:12

а можно просто написать небольшой 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>

Форум

Справочник

Discord чат

Курсы javascript