How to Create and Retrieve Data from a Prompt Dialog Box in Javascript
In this article, we show how to create and retrieve data from a prompt dialog box with Javascript.
A prompt dialog box is a message box that comes up automatically when a user reaches a website (of a website that has this feature) which asks that user for a specific piece of information; based on the user's answer into the text box, the program will respond to how it was programmed to run based on the user's answer.
For example, a prompt dialog box may pop up on a page, asking for a user's age. If the user is 18 or older, he can vote. If he is younger than 18, he cannot. For these reasons and for urgent matters are prompt dialog boxes used.
Below is a typical prompt dialog box that may be found on the web:
Prompt dialog boxes always have blank text boxes, which a user can write his or her input into to answer the question or statement at hand.
After, the user presses "OK" to submit his or her answer. If the user doesn't want to answer the
question,
s/he presses "Cancel".
How to Create a Prompt Dialog Box with Javascript
In this tutorial, we will show how to create a prompt dialog box using Javascript.
Using javascript, we can code a prompt dialog box so that when it comes up, we can ask a user for any information that is needed in or for any particular circumstance.
Say if we need the know the user's hourly wage. We can create a prompt box that comes up asking for the user's hourly wage.
To do this in javascript, we use the prompt method using the following format:
prompt(message, defaultValue);
where message is the text we want to place in the box, such as "Please enter your hourly age" or "Please Enter Your Job Title", etc. and defaultValue is the value we want to place in the textbox by default. This is entirely optional. For most purposes, we normally keep this text box blank.
It is best to assign the prompt method to a variable, so later when we need to retrieve information from the dialog box that the user entered, we can use that variable to reference it. So it is best to use the line:
var variable_name= prompt(message, defaultValue);
Example
var question= prompt ("Please Enter the Hours You've Worked This Week", "");
Return Values of the Prompt Method
The prompt box has two buttons that a user can click. "Ok" for the user to submit the information s/he has entered. Or "Cancel" for a user to deny a request to submit any information.
If the user clicks "Ok", the information s/he entered (the value in the text box) will be returned. And this information will be stored in the variable prompt method was assigned to.
If the user clicks "Cancel", null will be returned, since the user denied the request to
submit any information.
How to Retrieve Data from a Prompt Dialog Box with Javascript
So now that we know how to create a prompt dialog box with Javascript, we will now go over how to extract the data that the user entered and do something useful with it.
First of all, when we create a prompt dialog box, we do so with the intention of asking the user for some kind of information that we need. For example, we may ask the user, "How Many Hours Did You Work This Week?" and then use that answer to calculate the pay that the user should get and then show the user the pay he or she will get for those hours paid. Or we may ask the user, "How Old Are You?" If the user is 18 or older, he can vote. If he is younger, he cannot vote. This is what we will do in this article.
We're going to create a prompt dialog box that asks the user how old s/he is. If the user is 18 or older, we're going to send an alert box that says, "You are old enough to vote". If the user is younger than 18, we're going to send an alert box that says, "At this time, sorry, you are not old enough to vote."
If the user clicks "Cancel", we're also going to create a separate alert message for that, stating, "You pressed cancel. You chose not to answer this question."
These are the three circumstances that can arise. However, one more circumstance can arise- if the user doesn't enter a non-numeric character and presses "OK". In this circumstance, we create an alert box that says, "You entered invalidly. You did not enter a number." If the user enters a floating point number, we're going to take that number and convert into an integer.
Therefore, it's a lot of if-else conditionals, but let's get started.
The full lines of code to accomplish the above tasks are:
Now let's break down the code so that you can understand each line:
In the first line, we declare the variable age, which we will use to store the answer that the user enters from the prompt dialog box asking for the user's age.
In the second line, we use this if statement to find out if the user clicked "Cancel". If the answer stored in the variable age is null, then the user did click "Cancel" and we send them the alert box to notify the person of this.
The next else statement begins by parsing the value that the user entered to make sure that it is an integer. The parseInt function turns any of the other various number formats into an int. So, for example, if a user enters that they are 18.5 (18 and a half), the parseInt function will just turn it into an integer, 18. This simplifies comparisons. the
The next if statement uses the isNaN function. This is a function that checks to see if the characters entered in are numbers or not. If the characters stored in age are not numbers, then the isNaN function is true and it sends the alert that the user did not enter a number. If this is not the case, the code goes to the following else if statement.
The next if else statement uses the greater than or equal to sign (>=) to find out if the user is 18 or older. If s/he is, then s/he can vote. If not, the next else
statement is executed, which is if the user is younger than 18, which means s/he cannot yet vote.
If you want to execute this program to test it out, just refresh this page, and the prompt dialog
box will appear each time and you can test out each scenario.