Sending form text input to console.log for testing

Question

I have a simple form with one text field for testing. I need to have the info the user types in sent to console.log for now. Is this possible and if so what would I write?

<form class="pure-form">
    <input id="name" type="text" placeholder="Enter Name" />
    <button type="submit"><i class="fa fa-chevron-circle-right"></i></button>
</form>

Answer 1

Not sure why this question was down-voted. It's basic, but it's still a perfectly valid question.

The simplest way would be to grab the input by the ID then grab it's value and console.log it.

So, in a separate JavaScript file which you are included, or in a block, you would use:

console.log(document.getElementById('name').value);

You'll probably want to hook that to some event as well, so it prints each time they do something. The "change" event is probably the most appropriate. It fires every time the user types something and then changes focus (sometimes it'll also trigger when they stop typing, but not usually). If you want it to print every time a letter changes, you would want to use (one of) the "keydown", "keyup" or "keypress" events instead.

document.getElementById('name').addEventListener('input', function() {
    console.log(this.value);
});