JavaScript Form Values

My name is Alexandru! I am trying to learn javascript. I am using MDB and Bootstrap, and while using one of MDB's form examples I encountered a problem. My JavaScript won't show the exact answers from the form, but the following answer. Thank you in advance!

Thank you!

Answer:

[object NodeList]

function results() {

  var fistName = document.getElementsByName('firstName');
  var lastName = document.getElementsByName('lastName');
  var birth_date = document.getElementsByName('birth_date');
  var email = document.getElementsByName('email');
  var telehpone = document.getElementsByName('telehpone');





  var message = document.getElementsByName('message');

  document.write("<h1>Thank you!</h1>");
  document.write("<h3>Answer:</h3>")

  document.write(fistName + "<br/>");
  document.write(lastName + "<br/>");
  document.write(birth_date + "<br/>");
  document.write(email + "<br/>");
  document.write(telehpone + "<br/>");
  document.write(message + "<br/>");








}

<section class="intro">
  <div class="mask d-flex align-items-center h-100 gradient-custom">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-12 col-lg-9 col-xl-7">
          <div class="card">
            <div class="card-body p-4 p-md-5">
              <h3 class="mb-4 pb-2">Formular de Contact</h3>

              <form onsubmit="return results()">

                <div class="row">
                  <div class="col-md-6 mb-4">

                    <div class="form-outline">
                      <input type="text" name="Name" id="firstName" class="form-control" />
                      <label class="form-label" for="firstName">First Name</label>
                    </div>

                  </div>
                  <div class="col-md-6 mb-4">

                    <div class="form-outline">
                      <input type="text" name="lastName" id="lastName" class="form-control" />
                      <label class="form-label" for="Prenume">Last Name</label>
                    </div>

                  </div>
                </div>

                <div class="row">
                  <div class="col-md-6 mb-4">

                    <div class="form-outline datepicker">
                      <input type="text" name="birth_date" class="form-control" id="birthdayDate" />
                      <label for="birthdayDate" class="form-label">Birth Date</label>
                    </div>

                  </div>
                  <div class="col-md-6 mb-4">

                    <h6 class="mb-2 pb-1">Gender: </h6>

                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="femaleGender" value="option1" />
                      <label class="form-check-label" for="femaleGender">F</label>
                    </div>

                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="maleGender" value="option2" />
                      <label class="form-check-label" for="maleGender">M</label>
                    </div>

                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="otherGender" value="option3" />
                      <label class="form-check-label" for="otherGender">N</label>
                    </div>

                  </div>
                </div>

                <div class="row">
                  <div class="col-md-6 mb-4">

                    <div class="form-outline">
                      <input type="email" name="email" id="emailAddress" class="form-control" />
                      <label class="form-label" for="emailAddress">Email</label>
                    </div>

                  </div>
                  <div class="col-md-6 mb-4">

                    <div class="form-outline">
                      <input type="tel" name="telehpone" id="phoneNumber" class="form-control" />
                      <label class="form-label" for="phoneNumber">Telephone Number</label>
                    </div>

                  </div>
                </div>

                <div class="form-outline">
                  <textarea class="form-control" name="message" id="textAreaExample" rows="4"></textarea>
                  <label class="form-label" for="textAreaExample">Message</label>
                </div>

                <div class="mt-4">
                  <input id="button-submit" name="submit_button" class="btn btn-warning btn-lg" type="submit" value="Submit" />
                </div>

              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Solution

You should be using .value and also selecting only one from the list (say using [0])! Also, return false, else it will refresh. See below:

function results() {
  var fistName = document.getElementsByName("Name")[0].value;
  var lastName = document.getElementsByName("lastName")[0].value;
  var birth_date = document.getElementsByName("birth_date")[0].value;
  var email = document.getElementsByName("email")[0].value;
  var telehpone = document.getElementsByName("telehpone")[0].value;
  var message = document.getElementsByName("message")[0].value;

  document.write("<h1>Thank you!</h1>");
  document.write("<h3>Answer:</h3>");

  document.write(fistName + "<br/>");
  document.write(lastName + "<br/>");
  document.write(birth_date + "<br/>");
  document.write(email + "<br/>");
  document.write(telehpone + "<br/>");
  document.write(message + "<br/>");
  return false;
}

<section class="intro">
  <div class="mask d-flex align-items-center h-100 gradient-custom">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-12 col-lg-9 col-xl-7">
          <div class="card">
            <div class="card-body p-4 p-md-5">
              <h3 class="mb-4 pb-2">Formular de Contact</h3>
              <form onsubmit="return results()">
                <div class="row">
                  <div class="col-md-6 mb-4">
                    <div class="form-outline">
                      <input type="text" name="Name" id="firstName" class="form-control" />
                      <label class="form-label" for="firstName">First Name</label>
                    </div>
                  </div>
                  <div class="col-md-6 mb-4">
                    <div class="form-outline">
                      <input type="text" name="lastName" id="lastName" class="form-control" />
                      <label class="form-label" for="Prenume">Last Name</label>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6 mb-4">
                    <div class="form-outline datepicker">
                      <input type="text" name="birth_date" class="form-control" id="birthdayDate" />
                      <label for="birthdayDate" class="form-label">Birth Date</label>
                    </div>
                  </div>
                  <div class="col-md-6 mb-4">
                    <h6 class="mb-2 pb-1">Gender:</h6>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="femaleGender" value="option1" />
                      <label class="form-check-label" for="femaleGender">F</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="maleGender" value="option2" />
                      <label class="form-check-label" for="maleGender">M</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="otherGender" value="option3" />
                      <label class="form-check-label" for="otherGender">N</label>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6 mb-4">
                    <div class="form-outline">
                      <input type="email" name="email" id="emailAddress" class="form-control" />
                      <label class="form-label" for="emailAddress">Email</label>
                    </div>
                  </div>
                  <div class="col-md-6 mb-4">
                    <div class="form-outline">
                      <input type="tel" name="telehpone" id="phoneNumber" class="form-control" />
                      <label class="form-label" for="phoneNumber">Telephone Number</label>
                    </div>
                  </div>
                </div>
                <div class="form-outline">
                  <textarea class="form-control" name="message" id="textAreaExample" rows="4"></textarea>
                  <label class="form-label" for="textAreaExample">Message</label>
                </div>
                <div class="mt-4">
                  <input id="button-submit" name="submit_button" class="btn btn-warning btn-lg" type="submit" value="Submit" />
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>