javascript-打印表單值到console.log給出未定義的錯誤

Question

我試圖在提交到console.log上打印表單值進行測試。 但是收到未定義的消息。 無法弄清楚我到底要去哪里。 我在StackOverflow上經歷了各種答案，但還是沒有運氣。 這是代碼-

HTML

<form class="form-inline">
  <label class="required">* required </label>
  <div class="form-group">
    <input type="text" class="form-control inputArea" id="fullname" placeholder="Full Name *">
  </div>
  <div class="form-group">
    <input type="email" class="form-control inputArea" id="email" placeholder="Email *">
  </div>
  <div class="form-group">
    <input type="tel" class="form-control inputArea" id="phn" placeholder="Phone Number *">
  </div>
  <button type="submit" class="btn btn-default submit">Submit</button>
</form>

JavaScript的

<script>
    var formInput = document.querySelectorAll('#fullname, #email, #phn');

    document.querySelector('form.form-inline').addEventListener('submit', function (e) {
        e.preventDefault();
        console.log(formInput.value);
    });
</script>

Answer 1

您將無法定義，因為forminput不是單個對象，它具有多個沒有屬性value objects 。

您可以通過如下所示的索引獲取價值

console.log(formInput[0].value);

Answer 2

您在輸入值之前查詢表格。 腳本的第一行應位於事件偵聽器內：

<script>
    document.querySelector('form.form-inline').addEventListener('submit', function (e) {
        e.preventDefault();
        var formInput = document.querySelectorAll('#fullname, #email, #phn');
        console.log(formInput.value);
    });
</script>

這些值在頁面加載時被查詢。 您需要等到用戶提交后才能檢查值。

Answer 3

你可以試試看 希望能幫助到你！

  function myFunction(){ var a = document.getElementById("fullname").value; var b = document.getElementById("email").value; var c = document.getElementById("phn").value; console.log(a); console.log(b); console.log(c); return false; } 

 <form class="form-inline" onsubmit = " return myFunction()"> <label class="required">* required </label> <div class="form-group"> <input type="text" class="form-control inputArea" id="fullname" placeholder="Full Name *"> </div> <div class="form-group"> <input type="email" class="form-control inputArea" id="email" placeholder="Email *"> </div> <div class="form-group"> <input type="tel" class="form-control inputArea" id="phn" placeholder="Phone Number *"> </div> <button type="submit" class="btn btn-default submit">Submit</button> </form>