javascript - JavaScript を使用して配列内のフォームのすべてのコントロールを取得しますか?

Question

JavaScript を使用してすべてのコントロールとその値、および選択された状態を取得するにはどうすればよいですか? 配列内にすべてのコントロール (select や radio など) とそれらの選択状態を一緒に持つ配列を用意するとよいでしょう。

それはどういうわけか可能ですか？

ありがとう！

Answer 1

フォームのすべてのコントロールは、form.elementsコレクションで利用できます。その後、コレクションを繰り返し処理し、必要に応じて処理できます。

例えば

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">

Answer 2

もし、するなら

myParentNode.querySelectorAll('input[type="checkbox"], input[type="radio"]');

のまたはが<input>付いたsであるHTMLElementsの配列を取得します。その後、それらの値にアクセスできますtypecheckboxradio.value