JS Есть ли универсальный метод получения значения объектов на форме?

Question

[Николай Бараненко]

Здравствуйте.

Озадачился вопросом считывания значений всех элементов формы.
Нашел вот такой метод перечитывания всех элементов.

<script>    
    }   function isEmail() {
        var form = window.document.forms[0];
        var all_elements="";
        for (var i = 0; i<form.elements.length; i++) {
            // if (form.elements[i].type == "text") {
            //     form.elements[i].value = ""}
            var elem1 = document.getElementById (form.elements[i]);
            //var defValue1 = elem1.defaultValue;
            all_elements=all_elements+form.elements[i].name+" значение "+";";
        }
        document.getElementById("demo_2").innerHTML =all_elements;
        // document.getElementById("demo_2").innerHTML = document.getElementById("email1").value;
    }
</script>
<div id="demo_2"></div>

Проблема в том, что на форме есть объекты типа INPUT CHECK_BOX и типа TEXT и типа TEXT_AREA. Для CHECK_BOX такой метод не годится document.getElementById("email1").value

Существует ли какая-нибудь универсальный метод считывания значений объектов формы?

Answer 1

[Денис]

Если вам, кроме остальных элементов формы, надо получать значения только выбранных input с типом checkbox и radio, то можно так

<form>
  <select name="dropdown">
    <option value="opt_1">Opt 1</option>
    <option value="opt_2" selected>Opt 2</option>
    <option value="opt_3">Opt 3</option>
  </select>
  <input type="text" name="some_text" value="Text">
  <input type="checkbox" name="checkbox_1" value="checked" checked>
  <input type="checkbox" name="checkbox_2" value="not checked">
  <input type="radio" name="radio_group" value="not checked">
  <input type="radio" name="radio_group" value="checked" checked>
  <input type="radio" name="radio_group" value="not checked">
  <textarea name="bigtext">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ab tempora voluptate assumenda!</textarea>
</form>
<div id="demo"></div>

var result = [];
[].forEach.call(document.querySelector('form').elements, function(el) {
  if (['checkbox', 'radio'].indexOf(el.type) === -1 || el.checked) {
    result.push(el.name + ' > ' + el.value);
  }
});
demo.innerHTML = result.join('<br>');

Comments

[Mikhail Osher]

Array.from(document.querySelector('form').elements).forEach(...)

[Денис]

Mikhail Osher да, но я пока со скепсисом отношусь к тому, чтобы давать новичкам примеры на основе ES6. Хотя, упомянуть о таком варианте, наверно, стоило бы.

Answer 2

[Rou1997]

Ошибаетесь, для всех до единого типов элементов годится.

Comments

[Николай Бараненко]

document.getElementById(form.elements[i].name).value - должно всем подойти?

Answer 3

[Николай Бараненко]

for (var i = 0; i<form.elements.length; i++) {
            var elem = document.getElementById (form.elements[i]);
            var defValue = elem.value;
            all_elements=all_elements+form.elements[i].name+" значение "+defValue+";";
        }

не работает

Comments

[Rou1997]

Потому что form.elements[i] - это не id, это "готовый" элемент, сделайте напрямую var elem = form.elements[i];. А если не работает, то для этого в браузере существует консоль, в ней будет описание ошибки.