I am trying to test this small feature and I believe I wrote everything correctly, however it does not show up in my console.log. Is there something I am over looking?
var inputChange = function() {
var inputVal = document.getElementById("input").value;
console.log(inputVal)
}; form{
width: 300px;
height: 75px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</head>
<body>
<form>
<input id="input" type="text" name = "input" placeholder="Type Something"/>
<input type="submit" onclick ="inputChange()"/>
</form>
</body>
</html>I am trying to test this small feature and I believe I wrote everything correctly, however it does not show up in my console.log. Is there something I am over looking?
var inputChange = function() {
var inputVal = document.getElementById("input").value;
console.log(inputVal)
}; form{
width: 300px;
height: 75px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</head>
<body>
<form>
<input id="input" type="text" name = "input" placeholder="Type Something"/>
<input type="submit" onclick ="inputChange()"/>
</form>
</body>
</html>- You are missing the start html and head tags – Muleskinner Commented Oct 24, 2015 at 20:51
- I didn't include it in the code here but I have it in my code – jehicks2 Commented Oct 24, 2015 at 20:52
- Which browser are we talking of ? – Marged Commented Oct 24, 2015 at 20:56
4 Answers
Reset to default 14HTML inputs of type submit send their form whenever you click on them, so the script is getting called, and you're seeing the output briefly, but then the page is getting reloaded and the console is getting cleared. Change
<input type="submit" onclick ="inputChange()"/>
to
<input type="button" onclick ="inputChange()"/>
and you should be good.
This is happening because your form is submitting to itself and the page loads in a fraction of seconds for you to notice the difference.
There is 2 way you can solve this in your case.
One:
Add onsubmit="return false;" attribute in your form element.
<form onsubmit="return false;">
<input id="input" type="text" name = "input" placeholder="Type Something"/>
<input type="submit" onclick ="inputChange()"/>
</form>
Here is the Snippet: https://jsfiddle/ppn5ngwh/1/
Two: Modify your javascript:
document.getElementsByTagName("form")[0].onsubmit = function() {return false;}
var inputChange = function() {
var inputVal = document.getElementById("input").html;
console.log(inputVal)
};
Here is the snippet: https://jsfiddle/ppn5ngwh/
in chrome if your console is flashing u the desired msg and clearing of automatically, go to the setting in developer tools and make sure the preserved log is checked!!, this should do, Thanks inn advance:)
For anybody facing a similar problem in React Web, you may need to add this to your handler function:
event.preventDefault();