javascript - フォーム値をconsole.logに出力して未定義のエラーが発生しました

Question

console.logにsubmitしてテストする際にフォーム値を出力しようとしました。しかし、未定義のメッセージを得る。私がどこに間違っているのか分かりません。私は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>