javascript - 콘솔에서 값을 제출하지 않은 양식

여러 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="[email protected]">
<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으로부터 가치를 얻는 방법에 대한이 질문을 읽는 것이 좋습니다. JavaScript를 사용하여 텍스트 입력 필드의 값을 얻으려면 어떻게합니까?

요소 정의의 첫 번째 클래스 속성 만 적용됩니다. 이것은 다음을 쓸 때 의미합니다.

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

나중에 "class"속성은 적용되지 않습니다. 이는이 클래스에서 요소를 선택할 수 없음을 의미합니다.

Document.getElementsByClassName  라이브 HTMLCollection 를 반환  단일 요소 만있는 경우에도 마찬가지입니다. 이것은 다음과 같이 쓸 때 의미합니다 :

var personName = document.getElementsByClassName('personName').value;

와이즈 비즈는 없다  라이브 value 의 속성   HTMLCollection 에 대한 호출에 의해 반환 정의되지 않은 상태로 반환됩니다.

Document.getElementsByClassName

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="[email protected]"><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> 대신 ID를 사용해야합니다 충돌을 피하려면 :

Element#querySelector

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="[email protected]"><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>