Javascript Prompt () Alternative

Question

Simple JavaScript.

var userName = prompt ("What your name?"); document.write ("Hello " + userName + "."); 

Is there an alternative way to get user input (name) than through a popup? How can I apply a text box on a site to get a username?

Like this?

 <section class="content"> <input id="name" type="text"> <button onclick="userName()">Submit</button> <p id="user"></p> <script> function userName() { var name = document.getElementById("name").value; user.innerHTML = "Hello" + " " + name} </script> </section> 

Answer 1

Simple HTML part for creating a text field and button:

 <input id="name" type="text"> <button onclick="go()">Go</button> 

And a simple script to go with it, which is called when the button is clicked:

 function go() { var text = document.getElementById("name").value; alert("The user typed '" + text + "'"); } 

Working demo: http://jsfiddle.net/jfriend00/V74vV/

---

In short, you put data entry fields on your page. Then you connect the event handler to some user event (for example, clicking a button) and in this code you extract the value from the data entry field and do whatever you want with it.

If you want to read about all types of input tags, read here .

You will probably also want to read document.getElementById("xxx") , which allows you to find the elements on your page to which you have assigned an identifier, and then extract properties from them.

Answer 2

I recently finished writing a JS mini library, iocream.js, which does this.

Using iocream.js, your code will look like this:

 <script src=".../iocream.js"></script> <!-- include the library --> <pre id="io_operations"></pre> <!-- the JAR/hub of I/O --> <script> var jar = new IOCream('io_operations'); function ask_name() { jar.jin(say_hello, 'Please enter your name: '); // jin is read like C++ cin // say_hello is a CALLBACK FUNCTION which will // triggered on the user input, when available. } function say_hello(name) { jar.jout('Hello ' + name + '.'); // again, read like C++ cout } ask_name(); </script> 

All I / O operations are performed in the PRE element, the identifier of which must be provided to the IOCream constructor. There are options for setting the color scheme. You can optionally style your PRE element with CSS.

You can find documents in this beatbox repo , and examples here .

Answer 3

Yes it is possible.

you can apply onChange to the text box or

if in combination with a button you can use onClick or

If the text box is inside the form, onsubmit is also an alternative.

Answer 4

 <input id='txtUserName' type='text' /> <input onclick='getValue()' type='button' value='ok'> function getValue(){ var userName = document.getElementById('txtUserName').value; document.write(userName); }