How to save user input to a variable in html and js

Question

I make a game, and at the beginning she asks for your name. I want this name to be saved as varible. I have this HTML code:

<form id="form" onsubmit="return false;"> <input style=position:absolute;top:80%;left:5%;width:40%; type="text" id="userInput"> <input style=position:absolute;top:50%;left:5%;width:40%; type="submit" onclick="name()"> </form> 

and this is part of javascript:

 function name() { var input = document.getElementById("userInput"); alert(input); } 

Answer 1

This does not work because name is a reserved word in JavaScript. Change the function name to something else.

See http://www.quackit.com/javascript/javascript_reserved_words.cfm

 <form id="form" onsubmit="return false;"> <input style="position:absolute; top:80%; left:5%; width:40%;" type="text" id="userInput" /> <input style="position:absolute; top:50%; left:5%; width:40%;" type="submit" onclick="othername();" /> </form> function othername() { var input = document.getElementById("userInput").value; alert(input); } 

Answer 2

First, make your markup more portable / reusable. I also set the button type to 'button' instead of using the onsubmit attribute. You can switch the type attribute for submit if the form should interact with the server.

 <div class='wrapper'> <form id='nameForm'> <div class='form-uname'> <label id='nameLable' for='nameField'>Create a username:</label> <input id='nameField' type='text' maxlength='25'></input> </div> <div class='form-sub'> <button id='subButton' type='button'>Print your name!</button> </div> </form> <div> <p id='result'></p></div> </div> 

Then write a generic function to extract the username into a variable. It checks to see if the variable containing the username contains at least three characters. You can change this to whatever constant you want.

 function getUserName() { var nameField = document.getElementById('nameField').value; var result = document.getElementById('result'); if (nameField.length < 3) { result.textContent = 'Username must contain at least 3 characters'; //alert('Username must contain at least 3 characters'); } else { result.textContent = 'Your username is: ' + nameField; //alert(nameField); } } 

Then I created an event listener for the button. It is generally considered bad practice to have inline js calls.

 var subButton = document.getElementById('subButton'); subButton.addEventListener('click', getUserName, false); 

Here's a working and slightly styled demo:

CodePen demonstration of this answer.

Answer 3

Change your javascript to:

 var input = document.getElementById('userInput').value; 

This will cause the value that was entered into the text box, not the DOM object

Answer 4

How I use in PHP and JavaScript:

 <input type="hidden" id="CatId" value="<?php echo $categoryId; ?>"> 

Update JavaScript:

 var categoryId = document.getElementById('CatId').value; 

Answer 5

I found this to work best for me https://jsfiddle.net/Lu92akv6/ [I found this to work for me, try this fiddle] [1]

 document.getElementById("btnmyNumber").addEventListener("click", myFunctionVar); function myFunctionVar() { var numberr = parseInt(document.getElementById("myNumber").value, 10); // alert(numberr); if ( numberr > 1) { document.getElementById("minusE5").style.display = "none"; }} 

  <form onsubmit="return false;"> <input class="button button3" type="number" id="myNumber" value="" min="0" max="30"> <input type="submit" id="btnmyNumber"> </form>