Trying to take user input data from HTML and put the data into an array using Javascript

Question

Trying to take in user data from a form in HTML.

 <div class="footer">
 <form action="signup.html" method="post" id="contact">
 <h1>Contact Us</h1>
 <div class="field">
 <label for="name">Name:</label>
 <input type="text" class= "userInput" id="userName" name=name placeholder="Enter your full name" />
<br>
<label for="email">Email:</label>
<input type="text" class= "userInput" id="userEmail" name=email placeholder="Enter your email address" />
<br>
<label for="number">Number:</label>
<input type="text" class= "userInput" id="userNumber" name=number placeholder="Enter your email number" />
<br>
<label for="DOB">Date Of Birth:</label>
<input type="text" class= "userInput" id="userDob" name=DOB placeholder="Enter your date of birth" />
<br>
<button onclick="go()">Get in Touch</button>
</div>
<div class="footer">
</form>  
</div>

Once the user clicks submit. The JS runs to display that the information is correct.

function go(){
let formInputs=[document.getElementsByClassName("userInput")];
alert("Please confirm your details" + formInputs);
}

The alert states objectHTMLcollection?

Answer 1

document.getElementsByClassName("userInput") doesn't return the content of your inputs. It returns an object that contains all elements with the userInput class.

You have to look into each of them, and get their value; something like:

function go(){
  let formInputs=document.getElementsByClassName("userInput");
  for (let item of formInputs) {
    console.log(item.value);
  }
}

Answer 2

Get the form values using the DOM. In HTML, give your form tag a name:

<form name="form_user" action="signup.html" method="post" id="contact">

In JS, get all DOM form elements:

//Begin onload function
window.onload = function() {

//Get all DOM form elements
    var formListener = document.forms.form_user;
    //you can see the name of form is used here

//Function processes & validates form data, if so desired
    function formProcess() {
        //DOM form elements variables
        var nameInput = formListener.name;
        var emailInput = formListener.email;
        //etc, etc. Rest of your inputs here

        //Your code here

}   //End of formProcess funtion

//Event Listeners
    formListener.onsubmit = formProcess;

}//End onload

With that, do the loop function code @WOUNDEDStevenJones posted inside the formProcess function so that the user input gets put into an array upon form submission.