Taking User input in Javascript


This article highlights the steps and methods in which you can accept user input in javascript, it describes the alert, confirm and prompt box. It also describe the method of taking input from HTML form.

Obtaining User Input is important in any programming language and JavaScript is no exception. But the type of input in JavaScript is kind of different. This is either done using HTML forms of some of JavaScript own function. But it is really limited what is done using the JavaScript functions. Here we will both ways.

This post is more related to the taking input only then explaining the more deep concepts. So lets first describe about the direct methods of taking input in JavaScript.

JavaScript Input Pop-ups

first of all we are going to explain about the prompt box, this is quite similar to the alert box. Here are three types of pop up in JavaScript. alert, confirm and prompt. Alert is a type of output, so we are not listing it here specifically but we will definitely use it in the demonstration.

Confirm

The JavaScript provides an option of taking the input in the form of Yes or No. We call this confirmation box.


var input = confirm("Do you understand the code?");
if(input == true){
	alert("Yes ! I understood.");
}
else{
	alert("No ! I didn't understand.");
}

When this code will run It will prompt user for a question and depending up on what user chooses the program will proceed. The confirm box returns a boolean value which is either true for OK and false for CANCEL. you will see following output depending upon the button you click.

confirm box 1

 

confirm box 2

confirm box 3

Now, you understand the confirm-box, so its time to move on to prompt.

Prompt

The prompt box offers an input box in which user can type in the input, it is treated as a string input. The syntax is shown in the code snippet below.


var input = prompt("Hi,\nWhat is your name?");
alert("Thank you, "+input+", we know you now.");

This will prompt user with an input box and we can store it in the a variable and then use it wherever we want. The input will look like this.

prompt box 1

 

prompt box 2

This was all from the popup boxes of the JavaScript. Now we will look at the other method, in which we will use the HTML form field to take the input. We will create an input box and then on submission of the form we will take the input and display it in an alert box.


<form onsubmit="getInput()">
<input type="text" id="input">
<input type="submit">
</form>

now its time to create a script which will handle the form when it is submitted.


function getInput(){
	input = document.getElementById("input");
	alert(input.value);
}

In this code snippet, first of all we have created an HTML form which only holds two element, form input text and a submit button which submits the form, now the form submission will invoke a JavaScript function. this function uses the getElementByID function to get the DOM object of the input field and using its value property we get the value from that field.

htm input 1

 html input 2