Question

How can I get all controls and their values and selected state using JavaScript? It would be good to have an array having all the controls (like select and radio) in an array together with their selected state.

Is that somehow possible?

Thanks!

Answer 1

All the controls of a form are available in the form.elements collection. You can then iterate over the collection and process them however you want.

e.g.

function processForm(form) {
  var control, controls = form.elements;
  for (var i = 0, iLen = controls.length; i < iLen; i++) {
    control = controls[i];

    // Do something with the control
    console.log(control.tagName + ':' + control.name + ' - ' + control.value);
  }
}

<form id="form0">
<fieldset><legend>The form</legend>
  <input name="inp0" value="foo"><br>
  <select name="sel0">
    <option value="opt0" selected>opt0
    <option value="opt1">opt1
    <option value="opt2">opt2
  </select><br>
  <input type="button" value="Process form" name="btn0" onclick="
       processForm(this.form);
      ">
  <input type="reset">
</fieldset>
</form>

<input name="outsideForm" form="form0" value="Over the fence">