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>

javascript - 将表单值打印到console.log，给出未定义的错误

3 个答案: