Form not submitting its values on console

Question

I'm attempting to build an object of the input values in the form below, then log that object to the console; but it the values are not being retrieved properly.

What is wrong with my code?

document.getElementById('myForm').addEventListener('submit', contactPerson);

function contactPerson(e) {
  var personName = document.getElementsByClassName('personName').value;
  var personEmail = document.getElementsByClassName('personEmail').value;
  var personMessage = document.getElementsByClassName('personMessage').value;
  var contact = {
    name: personName,
    email: personEmail,
    message: personMessage
  }
  console.log(contact);
  e.preventDefault();

}

<form id="myForm">
  <label for="inputHorizontalSuccess">Name</label>
  <input type="text" class="form-control form-control-success" id="inputHorizontalSuccess" class="personName" placeholder="Name"><br>
  <label for="inputHorizontalSuccess">Email</label>
  <input type="email" class="form-control form-control-success" id="inputHorizontalSuccess" class="personEmail" placeholder="name@example.com"><br>
  <label for="inputHorizontalSuccess">Message</label>
  <input type="text" class="form-control form-control-success" id="inputHorizontalSuccess" class="personMessage" placeholder="Your Message"><br>
  <button type="submit">Submit</button>
</form>

All your inputs have two `id` attributes, which should not be done, and that's what causing you trouble with your JS code. — Lixus, May 29 '17 at 18:11

Hevar · Answer 1 · 2017-05-29T18:56:22.770

2

You have multiple Ids:

<input type="text" class="form-control form-control-success" id="inputHorizontalSuccess" id="personName" placeholder="Name">

You can either remove inputHorizontalSuccess.

Or add a name and get value from it instead, incase you must have inputHorizontalSuccess.

This should do it:

<input type="text" class="form-control form-control-success" id="inputHorizontalSuccess1" name="personName" placeholder="Name">

<input type="email" class="form-control form-control-success" id="inputHorizontalSuccess2" name="personEmail" placeholder="name@example.com">

<input type="text" class="form-control form-control-success" id="inputHorizontalSuccess3" name="personMessage" placeholder="Your Message">


var personName = document.querySelector('[name="personName"]').value;
var personEmail = document.querySelector('[name="personEmail"]').value;
var personMessage = document.querySelector('[name="personMessage"]').value;

I recommend you read this question on how to get value from the DOM. How do I get the value of text input field using JavaScript?

edited May 29 '17 at 18:56

answered May 29 '17 at 18:13

Hevar

1,474
1
13
24

I just made it to a class instead and I get it to print out the object but the values come back undefined... – Richard Jimenez May 29 '17 at 18:16
Thanks for the article ! I ended up using "document.querySelector('[name="searchTxt"]').value; selected by name". I could've also done it by class and done .class="blah blah blah". – Richard Jimenez May 29 '17 at 18:28
Yes, there are many ways you can do it. You just have to pick what suits your project best. – Hevar May 29 '17 at 18:29
[The ID should be unique](https://www.w3.org/TR/html5/single-page.html#the-id-attribute) `The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.` [Related SO post](https://softwareengineering.stackexchange.com/questions/127178/two-html-elements-with-same-id-attribute-how-bad-is-it-really) – blaze_125 May 29 '17 at 18:45
@blaze_125 you're totally right, I missed to update the IDs. It should be right now. – Hevar May 29 '17 at 18:57

score 1 · Answer 2 · answered May 29 '17 at 19:32

Only the first class attribute in an element definition is applied. This means that when you write the following:
```
<input type="text" class="form-control form-control-success" ... class="personName" placeholder="Name">
```
The later "class" attribute will not apply. This means that the element cannot be selected by this class.
Document.getElementsByClassName returns a live HTMLCollection even if there is only a single element. This means that when you write:
```
var personName = document.getElementsByClassName('personName').value;
```
There is no value property in the live HTMLCollection returned by the call to Document.getElementsByClassName, so it will return undefined.

document.getElementById('myForm').addEventListener('submit', contactPerson);

function contactPerson(e) {
  var personName = document.getElementsByClassName('personName')[0].value;
  var personEmail = document.getElementsByClassName('personEmail')[0].value;
  var personMessage = document.getElementsByClassName('personMessage')[0].value;
  var contact = {
    name: personName,
    email: personEmail,
    message: personMessage
  }
  console.log(contact);
  e.preventDefault();

}

<form id="myForm">
  <label for="inputHorizontalSuccess">Name</label>
  <input type="text" class="form-control form-control-success personName" id="inputHorizontalSuccess" placeholder="Name"><br>
  <label for="inputHorizontalSuccess">Email</label>
  <input type="email" class="form-control form-control-success personEmail" id="inputHorizontalSuccess" placeholder="name@example.com"><br>
  <label for="inputHorizontalSuccess">Message</label>
  <input type="text" class="form-control form-control-success personMessage" id="inputHorizontalSuccess" placeholder="Your Message"><br>
  <button type="submit">Submit</button>
</form>

However, you should probably use ID's instead of classes and Element#querySelector, to avoid conflict:

document.getElementById('myForm').addEventListener('submit', contactPerson);

function contactPerson(e) {
  var personName = document.querySelector('#personName').value;
  var personEmail = document.querySelector('#personEmail').value;
  var personMessage = document.querySelector('#personMessage').value;
  var contact = {
    name: personName,
    email: personEmail,
    message: personMessage
  }
  console.log(contact);
  e.preventDefault();

}

<form id="myForm">
  <label for="inputHorizontalSuccess">Name</label>
  <input type="text" class="form-control form-control-success" id="personName" placeholder="Name"><br>
  <label for="inputHorizontalSuccess">Email</label>
  <input type="email" class="form-control form-control-success" id="personEmail" placeholder="name@example.com"><br>
  <label for="inputHorizontalSuccess">Message</label>
  <input type="text" class="form-control form-control-success" id="personMessage" placeholder="Your Message"><br>
  <button type="submit">Submit</button>
</form>

Form not submitting its values on console

2 Answers2