How to get form values on submit?

Question

<form name="dome" onsubmit="return validateForm()" method="get">
    <input type="text" name="comment[]" value="comment1"/>
    <input type="text" name="comment[]" value="comment2"/>
    <input type="text" name="comment[]" value="comment3"/>
    <input type="text" name="comment[]" value="comment4"/>
</form>

I know I can send multiple inputs with the same name and have them save into an array by adding empty square brackets to the input name like in the code.

Now I would like to get the all the values in JavaScript for validation on submit.
I have tried this but it didn't work.

var comment_list = document.forms["dome"]["comment[]"].value;

score 0 · Accepted Answer · answered Sep 05 '19 at 09:31

You have to loop through the array and check any element is empty or not for validation as below.

var inps = document.getElementsByName('comment[]');
for (var i = 0; i <inps.length; i++) {
  var inp=inps[i];
  if(!inp.value){
    alert('Enter value for box ' + (i +  1));
  }
}

 <form name="dome" onsubmit="return validateForm()" method="get">
      <input type="text" name="comment[]" value="comment1"/>
      <input type="text" name="comment[]" value="comment2"/>
      <input type="text" name="comment[]" value=""/>
      <input type="text" name="comment[]" value="comment4"/>
    </form>

score 0 · Answer 2 · answered Sep 05 '19 at 09:33

The return of comment_list is a nodeList. You have to iterate over it. e.g:

var comments = [];

var comment_list = document.forms["dome"]["comment[]"].forEach(function(el) {
  comments.push(el.value);
});

console.log(comments);

<form name="dome" onsubmit="return validateForm()" method="get">
  <input type="text" name="comment[]" value="comment1"/>
  <input type="text" name="comment[]" value="comment2"/>
  <input type="text" name="comment[]" value="comment3"/>
  <input type="text" name="comment[]" value="comment4"/>
</form>

score 0 · Answer 3 · answered Sep 05 '19 at 09:46

You can pass this to validateForm and this will contain content of your form. You can then convert it to array and map values from your form. As an alternative, you can map document.forms["dome"]["comment[]"] to get values.

See the following demo (I added submit button and you have to open browser console to see result as submit clears the output - last element of formcontent is that button)

function validateForm(formcontent) {
  let arr = Array.from(formcontent).map(({value}) => ({value}));
  console.log("formcontent:",JSON.stringify(arr))

  let alternative = Array.from(document.forms["dome"]["comment[]"]).map(({value})=>({value}));
  console.log('document.forms["dome"]["comment[]"]:', JSON.stringify(alternative));
}

<form name="dome" onsubmit="validateForm(this)" method="get">
  <input type="text" name="comment[]" value="comment1" />
  <input type="text" name="comment[]" value="comment2" />
  <input type="text" name="comment[]" value="comment3" />
  <input type="text" name="comment[]" value="comment4" />
  <button type="submit">submit</button>
</form>

How to get form values on submit?

3 Answers3