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

Question

I'm learning javascript so this question may seem basic. I have a form that takes email address and a choice from a dropdown menu as inputs. When the button is clicked, I'd like both these inputs to be sent to the console log.

The javascript I'm using below just returns 'null' How do I send the email AND the option selected from the dropdown menu to the console log?

 document.getElementById('email').addEventListener('change', function() { console.log(this.getAttribute('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" 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> 

Answer 1

In event listener.. this is not proerly availabe so use. event listner function receives event object as first parameter. so you can use that ... change your code as below.

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

Answer 2

Try this way:

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

 <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> 

Answer 3

Try this to get email & dropdown value when clicked on Sign up now button.

 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>