Question

我正在学习javascript，所以这个问题看起来很基本。我有一个表单，它将电子邮件地址和下拉菜单中的选项作为输入。单击该按钮时，我希望将这两个输入发送到控制台日志。

我在下面使用的javascript只返回＆＃39; null＆＃39; 如何将电子邮件和从下拉菜单中选择的选项发送到控制台日志？

＆＃13;

document.getElementById('email').addEventListener('change', function() {
    console.log(this.getAttribute('value'));
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

<form role="form" id="sub_form">
  <div class="container">

    <div class="row">
      <div class="col-sm-7">
         <div class="form-group">
         <input type="email" class="form-control custom-email" name="email" id="email" placeholder="Email Address">
      </div>
      </div>

      <div class="col-sm-5">
         <div class="form-group">
         <select id="dropdown" name="dropdown" class="form-control custom-dropdown">
           <option>Select...</option>
           <option>Design</option>
           <option>Human Resources</option>
           <option>Finance</option>
         </select>
       </div>
       </div>
    </div>

   <div class="row">
   <div class="col-sm-4">
  <button type="submit" class="btn btn-large custom-button"> Sign up now </button>
  </div>
  </div>
  </div>
</form>

＆＃13;

Answer 1

在事件监听器中..这不是可用的，所以使用。事件列表器函数接收事件对象作为第一个参数。所以你可以用... 更改您的代码如下。

document.getElementById('email').addEventListener('change', function(e) {
    console.log(e.target.value);
});

Answer 2

尝试这种方式：

＆＃13;

document.getElementById('sub_form').onsubmit = function(){
  console.log(document.getElementById('email').value, document.getElementById('dropdown').value)
  return false;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

<form role="form" id="sub_form">
  <div class="container">

    <div class="row">
      <div class="col-sm-7">
         <div class="form-group">
         <input type="email" class="form-control custom-email" name="email" id="email" placeholder="Email Address">
      </div>
      </div>

      <div class="col-sm-5">
         <div class="form-group">
         <select id="dropdown" name="dropdown" class="form-control custom-dropdown">
           <option>Select...</option>
           <option>Design</option>
           <option>Human Resources</option>
           <option>Finance</option>
         </select>
       </div>
       </div>
    </div>

   <div class="row">
   <div class="col-sm-4">
  <button type="submit" class="btn btn-large custom-button"> Sign up now </button>
  </div>
  </div>
  </div>
</form>

＆＃13;

Answer 3

试试这个以获取电子邮件＆amp;单击立即注册按钮时的下拉值。

document.getElementById('custom-button').addEventListener("click", function(e) {
  e.preventDefault();
  console.log(document.getElementById("custom-email").value);
  console.log(document.getElementById("dropdown").value);
});

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

<form role="form" id="sub_form">
  <div class="container">

    <div class="row">
      <div class="col-sm-7">
         <div class="form-group">
         <input type="email" id="custom-email" class="form-control custom-email" name="email" id="email" placeholder="Email Address">
      </div>
      </div>

      <div class="col-sm-5">
         <div class="form-group">
         <select id="dropdown" name="dropdown" class="form-control custom-dropdown">
           <option>Select...</option>
           <option>Design</option>
           <option>Human Resources</option>
           <option>Finance</option>
         </select>
       </div>
       </div>
    </div>

   <div class="row">
   <div class="col-sm-4">
  <button type="submit" id="custom-button" class="btn btn-large custom-button"> Sign up now </button>
  </div>
  </div>
  </div>
</form>

在Javascript中将两个表单输入发送到控制台日志

3 个答案: