Question

我尝试在下面的表单中构建输入值的对象，然后将该对象记录到控制台;但是没有正确检索这些值。

我的代码出了什么问题？

＆＃13;

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();

}

＆＃13;

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

＆＃13;

Answer 1

你有多个ID：

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

您可以删除inputHorizontalSuccess。

或者添加name并从中获取值，因为您必须拥有inputHorizontalSuccess。

应该这样做：

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

我建议您阅读有关如何从DOM获取价值的问题。 How do I get the value of text input field using JavaScript?

Answer 2

仅应用元素定义中的第一个类属性。这意味着当您编写以下内容时：
```
<input type="text" class="form-control form-control-success" ... class="personName" placeholder="Name">
```
后来的＆＃34;班级＆＃34;属性不适用。这意味着该类不能选择该元素。
Document.getElementsByClassName也会返回实时HTMLCollection。这意味着当你写：
```
var personName = document.getElementsByClassName('personName').value;
```
value调用返回的实时HTMLCollection中没有Document.getElementsByClassName属性，因此它将返回undefined。

＆＃13;

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();

}

＆＃13;

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

＆＃13;

但是，您应该使用ID而不是类Element#querySelector来避免冲突：

＆＃13;

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();

}

＆＃13;

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

＆＃13;

表单不在控制台上提交其值

2 个答案: