0

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

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

<div id='demo_2'></div>
function isEmail() {
    var form = window.document.forms[0];
    var all_elements="";

    for(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;
}

В форме есть объекты типа <input type='checkbox'>, <input type='text'> и <textarea>
Для checkbox такой метод не годится document.getElementById("email1").value

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

2
  • Из формы получается объект-узел form, в котором есть свойство childNodes - оно ссылается на объект-список (этот объект список в ДОМ не входит) вложенных объектов-узлов input, button, плюс, еще куча текстовых объектов узлов (которые получились из-за того, что ты разметку пишешь, используя пробелы, табуляции, переводы строк. у этих текстовых узлов-объектов прототип TEXT). тебе надо пройтись в цикле по этому объекту-списку, на который ссылается свойство childNodes объекта form и условие в цикл вложить - если тип узла ELEMENT, тогда забирай у этого объекта узла свойство value (если оно есть).
    – Dimon
    Commented 23 июл. 2016 в 20:59
  • свойство value ссылается на примитивное значение (строка. если строку эту "обернуть" в объект, то объект-прототип будет String())
    – Dimon
    Commented 23 июл. 2016 в 20:59

3 ответа 3

1

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>');
<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>

0

В цикле добавить условие на проверку типа инпута.

Если type="checkbox" 
проверять: if(input.checked)// true || false вернет
2
  • Это не проверка типа инпута, это проверка стоит ли галочка)
    – Doofy
    Commented 23 июл. 2016 в 5:36
  • Я строкой выше отписал, что проверить тип нужно, на type="checkbox".
    – user190134
    Commented 23 июл. 2016 в 9:40
0

Можно сериализовать форму
var editFormData = $('#' + 'form-name').serialize();

Получаем массив (наименование поля, значение). Учтите, чтобы поля сериализовались нужно добавить для элементов атрибут name со значением.
Далее его можно передать как строку на сервер и в параметрах функции уже разобрать каждое значение

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.