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不是一個單一的對象時，它有多個objects不具有財產value。

您可以通過索引像下面

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>