Javascript Tutorial - Getting User Input with Prompt and Confirm
There's lots of times when you might want to ask a user a simple yes or no question, or ask for some text input. In this tutorial, I'm going to demonstrate how to use the confirm and prompt functions in javascript to get feedback from your users.
| There aren't many places on the web that use either of these functions. Google Reader is a place I see one of them most often. If you attempt to mark all unread items in a feed as read, and there are several items in the feed, Google will ask you if you're sure you want to do this. It's a perfect example of when you'd want to use the confirm function. As for the prompt function, well I don't think I've every actually seen it in use, but it's useful to know nonetheless. |
Let's start with the confirm function, which will present a question to your user and ask them to respond with "OK" or "Cancel".
So how did I make this example? Well, it's painfully easy. It's so simple, I'll just throw all of the code into a single block.
function confirmInput()
{
var ans = confirm("Install a virus and " +
"delete all your files?");
alert(ans ? "You are brave. For that, " +
"I will not delete your files." :
"Too bad, I installed it anyway.");
}
</script>
<input type="button" onclick="confirmInput()"
value="Show me the Question!" />
The first thing I need is a function that is called when the button is clicked. I called mine confirmInput. Inside that is where the magic happens. The function confirm simply takes the question you want to ask as a string and returns a boolean indicating the answer. Normally, based on the return value of confirm, you'd either do or not do what you just asked the user. Here I just alerted some text to indicate the answer. After the javascript code, is just the button itself - simple and straight forward.
All right, let's move on to the asking the user for some text input using the prompt function.
Just like with confirm, prompt is very easy to use.
function getInfo()
{
var ans = prompt("What the answer to life, " +
"the universe, and everything?");
alert(ans == "42" ? "Good job, you read a book!":
"There's a book you should read.");
}
</script>
<input type="button" onclick="getInfo()"
value="Ask me Something!" />
Instead of a boolean, prompt returns the string actually entered by the user. If the user clicks OK without entering anything, you'll receive an empty string. If the user clicks Cancel, the function will return null.
Well, there you go. You now know how to ask for all sorts of information using javascript. If you have questions or comments, leave them below. If you actually found a mainstream website that uses the prompt function, I'd love to hear about that also.
Posted in Javascript, All Tutorials by The Reddest |
June 16th, 2008 at 11:17 am
People seem to avoid use of prompt because Internet Explorer blocks it since XP Service Pack 2. I think it is a good reason that prompt is not very common.
June 16th, 2008 at 11:33 am
That does not seem to be true. I am running IE6 and SP2 and sample prompt above works just fine.
June 16th, 2008 at 11:48 am
IE7 blocks it - the call immediately returns with null. It then adds that little bar at the top where you can allow it.
June 17th, 2008 at 6:43 pm
Using “I will install a virus and delete” as your sample message is not good. You should change it.
September 24th, 2008 at 8:36 am
IE7 will not always block the Prompt dialog box. It depends on your Security settings.