Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.08.2014, 21:17
Кандидат Javascript-наук
Отправить личное сообщение для lammeR Посмотреть профиль Найти все сообщения от lammeR
 
Регистрация: 15.01.2010
Сообщений: 138

Вывод данных в инпут
Привет всем!
Есть три поля:
<div id="infoWrapper">
    <p>Ширина: <input type="text" id="width"></p>
    <p>Высота: <input type="text" id="height"></p>
    <p>Площадь: <input type="text" id="area"></p>
</div>


Нужно выводить значения в данные поля при действии пользователя. Чтобы выводить значения в каждое поле я сохраняю каждый html-элемент поля в его переменную. Иногда нужно вывести значение только в 1 поле, иногда - в 2-х, иногда в 3-х, по-этому я сделал некую универсальную фун-я render(), в которую передаётся объект и в которой обрабатываются все случаи:
function render (data) {
   
   for ( var key in data ) {
     
      if ( key == "width" ) {
         widthInput.val( data[key] );
      }
      
      if ( key == "height" ) {
         heightInput.val( data[key] );
      }

      if ( key == "area" ) {
         areaInput.val( data[key] );
      }
   }

}

Это получается какой-то ужас, а если добавятся ещё 5 полей - функция растянется и тд. И выглядит некрасиво и вообще, пока это простые 3 поля, если усложнить всё - будет головная боль. Как можно по-нормальному организовать вывод значений? Может как-то используя шаблонизаторы? Посоветуйте.
Ответить с цитированием
  #2 (permalink)  
Старый 25.08.2014, 22:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

lammeR,

function render (data) {
 	  var Input, key;
 	  for (key in data) {
 	    if (Input = document.getElementById(key)) {
 	      Input.value = data[key];
 	    }
 	  }
 	}
Ответить с цитированием
  #3 (permalink)  
Старый 25.08.2014, 22:11
Кандидат Javascript-наук
Отправить личное сообщение для lammeR Посмотреть профиль Найти все сообщения от lammeR
 
Регистрация: 15.01.2010
Сообщений: 138

рони, дело в том, что id-названия другие, типа widthRoomInput, это здесь я написал для простоты примера. Ещё минус в том, что каждый раз надо искать элементы по id. И ещё забыл указать, что значения у меня выводятся при движении мышки - потому я и сохраняю инпуты в переменные.

Последний раз редактировалось lammeR, 25.08.2014 в 22:41.
Ответить с цитированием
  #4 (permalink)  
Старый 26.08.2014, 15:50
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

Сообщение от lammeR Посмотреть сообщение
Ещё минус в том, что каждый раз надо искать элементы по id.
а кто мешает инпуты засунуть в ассоциативный массив:

<html>
<head>
</head>
<body>
<div id="infoWrapper">
    <p>Ширина: <input type="text" id="width"></p>
    <p>Высота: <input type="text" id="height"></p>
    <p>Площадь: <input type="text" id="area"></p>
</div>

<script type="text/javascript">
var myInputs = {};
Array.prototype.forEach.call(document.querySelectorAll('input'), function (ths)
	{
	myInputs[ths.getAttribute('id')] = ths;
	})
console.log(myInputs);
</script>
</body>
</html>


тогда ваша функция будет выглядеть как то так:
function render (data) {
   
   for ( var key in data ) {
		myInputs[key].value = data[key];
   }

}
Ответить с цитированием
  #5 (permalink)  
Старый 26.08.2014, 18:46
Кандидат Javascript-наук
Отправить личное сообщение для lammeR Посмотреть профиль Найти все сообщения от lammeR
 
Регистрация: 15.01.2010
Сообщений: 138

skrudjmakdak, в итоге я так и сделал.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Простейшая отправка данных на сервер и вывод MBmusic AJAX и COMET 12 23.09.2013 12:35
отправка данных из формы и вывод полученных данных sxe jQuery 2 21.05.2013 00:34
Двойная Фильтрация данных таблицы David0707 Общие вопросы Javascript 0 19.03.2012 13:00
Вывод данных в поле ввода с помощью JS Aleks-prog Ваши сайты и скрипты 0 23.06.2011 12:09
Вывод данных в Друпал 6 из MySQL, небольшая работа torquemada Работа 1 22.05.2011 17:05