[英]javascript - printing form values to console.log giving undefined error
I was trying to print form values on submit to console.log to test. 我试图在提交到console.log上打印表单值进行测试。 But getting a undefined message.
但是收到未定义的消息。 Can't figure out where I am going wrong exactly.
无法弄清楚我到底要去哪里。 I have gone through various answers on StackOverflow but still no luck.
我在StackOverflow上经历了各种答案,但还是没有运气。 Here is the code -
这是代码-
HTML 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 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>
You are getting undefined because forminput
is not a single object it has multiple objects
which doesn't have property value
. 您将无法定义,因为
forminput
不是单个对象,它具有多个没有属性value
objects
。
You can get value by index like below 您可以通过如下所示的索引获取价值
console.log(formInput[0].value);
You are querying the form before the values are inputted. 您在输入值之前查询表格。 The first line of your script should be inside the event listener:
脚本的第一行应位于事件侦听器内:
<script>
document.querySelector('form.form-inline').addEventListener('submit', function (e) {
e.preventDefault();
var formInput = document.querySelectorAll('#fullname, #email, #phn');
console.log(formInput.value);
});
</script>
The values are being query-ed on page-load. 这些值在页面加载时被查询。 You need to wait until the user submits before you check the values.
您需要等到用户提交后才能检查值。
You can try this. 你可以试试看 Hope it helps!
希望能帮助到你!
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.