Javascript: Unable to log text input to console

Question

I am trying to log a text input to the developer console in Chrome. Here is my html:

<html>
<body>
<div class="container">
    <div class="form-group">
      <form name="myForm">
      <label name='header'> Some label </label>
        <input id='userInput' type='text' class='form-control' placeholder="some javascript value comes here" name='myInput'>
<button onclick="someFunction()"> Submit </button>
      </form>
      </div>
      </div>
</body>
</html>

and here's the JavaScript:

<script>
function someFunction(){
var userInput=document.getElementById('userInput');
console.log('userInput);
}
</script>

can anybody tell me where am i getting wrong.

You probably want to log just the input. If so, use `console.log(userInput.value)`. And since your button is inside form it forces page refresh on click. To prevent it, add type for your button: `type="button"` — Random Guy, Jan 20 '18 at 10:18

Underscore Elven · Answer 1 · 2018-01-20T10:42:07.430

0

For the console.log(). You are adding '. It should be console.log(variable_name). In this case console.log(userInput)

<input id='userInput' type='text' class='form-control' placeholder="some javascript value comes here" name='myInput'>
<button onclick="someFunction()"> Submit </button>

<script>
function someFunction(){
var userInput=document.getElementById('userInput').value;
console.log(userInput);
}

edited Jan 20 '18 at 10:42

answered Jan 20 '18 at 10:19

Underscore Elven

63
9

score 0 · Answer 2 · answered Jan 20 '18 at 10:27

There's a typo in your javascript You wrote 'userInput but it should be userInput

<script>
function someFunction(){
var userInput=document.getElementById('userInput');
// WRONG VARIABLE NAME USED console.log('userInput);
console.log(userInput); //RIGHT VARIABLE NAME USED
}
</script>

zer00ne · Answer 3 · 2018-01-20T12:11:18.127

A. What you need to log is not the <input> textbox (userInput), it's the value inside the textbox (userInput.value).

Solution: console.log(userInput.value)

B. The requirements for form controls (e.g. <input>, <button>, etc.) are different inside and outside of a <form>.

Solution: add to <button> tag: type="button" or move <button> tag outside of <form> tag.
1. A <button> tag needs a type attribute when it's a child of a <form>.
  - <button type='button" or "submit" or "reset">
2. If a <button> tag doesn't have a type attribute, then it is a type="submit" by default. A submit button will send data of form controls (form tags with name attribute) and refresh the page.
3. A <button> outside the <form> tag doesn't require a type attribute.
4. Any <input> needs a type or it defaults to type="text"
5. A type="submit" or "reset" outside a <form> tag needs a form="ID of form"

In the demo, the buttons with black text are <input> tags and the buttons with red text are <button> tags. Data in a <form> ends up either to a server and results can be seen in a response or gets processed in client and can be seen in a log or displayed in DOM. The <form> is setup to send data to a live test server to show a response.

Demo

function xFunction(e) {
  var userInput = document.getElementById('userInput');
  console.log(userInput.value);
}

button {
  color: red
}

form {
  border: 1px solid #000
}

<html>

<body>
  <div class="container">
    <div class="form-group">
      <form id="xForm" action='https://httpbin.org/post' method='post'>
        <label> Some label </label>
        <input id='userInput' type='text' class='form-control' placeholder="some javascript value comes here" name='userInput'>
        <button onclick="xFunction()">OP button No type</button>
        <br>
        <label>&lt;input&gt;</label>
        <input type='submit'>
        <input type='reset'><br>
        <label style='color:blue'>This is runs function and doesn't send data: </label>
        <input type='button' value="Button" onclick='xFunction()'><br>
        <label style='color:red'>&lt;button&gt;</label>
        <button type='submit'>Submit</button>
        <button type='reset'>Reset</button><br>
        <label style='color:blue'>This is runs function and doesn't send data: </label>
        <button onclick="xFunction()" type='button'> Button</button>
      </form>
      <label>type="submit" outside of form#xForm</label>
      <input type='submit' value='No form attribute'>
      <input type='submit' form='xForm' value='form="ID of <form>"'><br>
      <label style='color:blue'>This is runs function and doesn't send data: </label>
      <button onclick="xFunction()">OP button No type</button>
    </div>
  </div>

</body>

</html>

Javascript: Unable to log text input to console

3 Answers3

Demo