Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.07.2013, 14:21
Интересующийся
Отправить личное сообщение для HaseProgram Посмотреть профиль Найти все сообщения от HaseProgram
 
Регистрация: 07.03.2012
Сообщений: 28

Обход всех инпутов в форме.
Всем добрый день!
Помогите решить задачу: нужно средствами голого js (без использования библиотек, таких как jQuery) обойти все инпуты в форме и запихнуть их значения в массив. Пример:

function getData() {
data = new array();
//отбор value для всех инпутов.
//конечный массив должен быть таким:
//data = {'n1':value1,'n2':value2...};
return data;
}


<form>
<input type="text" name="n1">
<input type="text" name="n2">
<input type="text" name="n3">
<input type="text" name="n4">
<button onclick="getData()">
</form>


Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 02.07.2013, 14:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

HaseProgram,
а может по тихоньку сами ?
нашли элементы нужные
http://learn.javascript.ru/searching-elements-dom
обошли их циклом
http://learn.javascript.ru/while-for
собрали name и value
и заполнили обьект data ваша строка 5,
а не массив строка 2
Сообщение от HaseProgram
data = new array();
data = {}
пробуйте - ошибётесь поправят.
Ответить с цитированием
  #3 (permalink)  
Старый 02.07.2013, 14:54
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

<form id="form">
    <input type="text" name="n1" value="abc">
    <input type="text" name="n2" value="cde">
    <input type="text" name="n3" value="bla">
    <input type="text" name="n4" value="xyz">
    <button onclick="getData(); return false;">Get Data</button>
</form>
<script>
    function serializeForm(form) {
        var elements = Array.prototype.slice.call(form.elements);
        var data = {};
        elements.forEach(function(element){
            if (element.tagName.toLowerCase() == 'input' && element.name)
                data[element.name] = element.value;
        });
        return data;
    }
    
    function getData() {
        var data = serializeForm(document.forms.form);
        
        alert(Object.keys(data).map(function(key){return key + ':' + data[key]}));
        return false;
    }
</script>

Не будет работать в старых браузерах. Хотя это легко исправить.

Последний раз редактировалось danik.js, 02.07.2013 в 14:56.
Ответить с цитированием
  #4 (permalink)  
Старый 02.07.2013, 15:05
Интересующийся
Отправить личное сообщение для HaseProgram Посмотреть профиль Найти все сообщения от HaseProgram
 
Регистрация: 07.03.2012
Сообщений: 28

Сообщение от danik.js Посмотреть сообщение
Не будет работать в старых браузерах. Хотя это легко исправить.
Спасибо за ответ, со старыми браузерами я разберусь, мне главное сама мысль. Очень помогли!)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как проверить все атрибуты всех инпутов shaltay jQuery 10 19.05.2017 15:07
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 11:33
Обход всех элементов на странице. lexnext1 Элементы интерфейса 0 08.11.2011 12:58
Доступ к форме с изменяемым именем Хиросим Общие вопросы Javascript 2 21.10.2010 00:06
Полный список всех цветов html? Бобр Оффтопик 4 13.04.2009 14:11