Javascript Prompt() Alternative

Question

Simple JavaScript.

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

Is there an alternative way to get the user's input (name) than through a pop up box? How would I go about implementing a text box within the site to obtain the user's name?

How is 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

A simple piece of HTML to create a text field and a button:

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

And a simple script to go with it that 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 a nutshell, you put data entry fields into your page. Then you hook up an event handler to some sort of user event (like the click of a button) and in that code, you fetch the value from the data entry field and do whatever you want with it.

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

You probably also want to read about document.getElementById("xxx") which allows you to find elements in your page that you've assigned an id to and then fetch properties from them.

Answer 2

I've recently finished writing a JS mini-library, iocream.js that does this.

Using iocream.js, your code would look something as follows:

<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++'s cin
    // say_hello is a CALLBACK FUNCTION which will
    // triggered on the user's input, when available.
}
function say_hello(name) {
    jar.jout('Hello ' + name + '.');               // again, read like C++'s cout
}
ask_name();
</script>

All input/output operations happen in a PRE element, whose ID must be supplied to the IOCream constructor. There are options to set the color scheme. Optionally, you may entirely style the PRE element using CSS.

You can find the docs at this bitbucket repo, and examples here.

Answer 3

Yes it is possible.

you can apply onChange to the textbox or

if combined with a button, you can use onClick, or

if the textbox is inside a 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);
}