홈>2020-02-01 00:42

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

아래와 같은 형식으로 입력 값의 개체를 작성하려고 시도한 다음 해당 개체를 콘솔에 기록합니다. 하지만 값이 제대로 검색되지 않습니다.

코드에 어떤 문제가 있습니까?

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>

javascript

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

답변 # 2
요소 정의의 첫 번째 클래스 속성 만 적용됩니다. 이것은 다음을 쓸 때 의미합니다.
```
<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="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> 대신 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="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>

Python2.net

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

관련 자료