我试图在提交到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>
答案 0 :(得分:0)
您未定义,因为forminput
不是一个具有多个objects
但没有财产value
的对象。
您可以通过索引获取价值,如下所示
console.log(formInput[0].value);
答案 1 :(得分:0)
您在输入值之前查询表单。脚本的第一行应该在事件监听器中:
<script>
document.querySelector('form.form-inline').addEventListener('submit', function (e) {
e.preventDefault();
var formInput = document.querySelectorAll('#fullname, #email, #phn');
console.log(formInput.value);
});
</script>
正在页面加载时查询这些值。在检查值之前,您需要等到用户提交。
答案 2 :(得分:0)
你可以试试这个。希望它有所帮助!
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>