I was puzzled by the question of getting the values ​​of all form elements.

I found this method of re-reading all the elements.

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

The form has objects of type <input type='checkbox'> , <input type='text'> and <textarea>
For checkbox this method is not valid document.getElementById("email1").value

Is there any universal method for obtaining the values ​​of form objects?

  • From the form, a form node object is obtained, in which there is a childNodes property — it refers to a list object (this object is not included in the DOM) of input, button nested object objects, plus a bunch of node text objects (which were obtained due to that you write markup using spaces, tabs, line breaks (for these text object nodes, the TEXT prototype). you need to loop through this list object referenced by the childNodes property of the form object and the condition to attach to the cycle - if the node type is ELEMENT, then take the value property (if any) from this node object. - Dimon
  • the value property refers to a primitive value (string. if the string wraps this into an object, then the prototype object will be String ()) - Dimon

3 answers 3

 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>

    In the loop, add a condition to check the input type.

     Если type="checkbox" проверять: if(input.checked)// true || false вернет
    • This is not an input type check, this is a check whether the check mark is worth it) - Mr. Black
    • I wrote a line above that I need to check the type, on type = "checkbox". - user190134

    You can serialize the form
    var editFormData = $('#' + 'form-name').serialize();

    We receive an array (field name, value). Note that the fields serialized need to add a name attribute for the elements with a value.
    Then it can be passed as a string to the server and in the function parameters you can already parse each value