Return to Kroll Design home page

JavaScript Tutorials

 
« Return

prompt method for obtaining user-entered data

The prompt method generates a pop-up window, requesting the user to enter some information.
The first parameter is the text which you want to go to the left of the input box, and the second parameter is the default text which you want inside the input box. If you don't want default text, use double quotation marks.

After you are prompted to enter your name and date of birth, the information that you specify is added to the web page itself. document.write() cannot be used for this purpose, because the page has already been loaded, and using document.write at this late stage will overlay the entire page with the new information. So to append the user-entered info to the existing page, the innerHTML method is used (see the "code" section of this page to see how it was coded).

If you see the Information bar as shown here, click on it and choose "Temporarily Allow Scripted Windows":

information bar

Output:

 

Code:

<script type="text/javascript">
//<![CDATA[
function prompt_box(div_name) {
var yourName = window.prompt("Please enter your first and last name:", "");
var yourDateOfBirth = window.prompt("Please enter your date of birth:", "mm-dd-yyyy");

document.getElementById(div_name).innerHTML =
"<span class='body-copy'>" +
"The name you entered is: " + yourName + "<br /><br />" +
"The date of birth you entered is: " + yourDateOfBirth + "</span>";
}

//]]>
</script>

<form action="javascript:prompt_box('output1')">
<input type="submit" value="Click to be prompted for name and date of birth" />
</form>

<div id="output1">
 
</div>


 
« Return


©2012 Kroll Design    info@KrollDesign.net    781.910.3694
Last modified: 12/31/1969 7:00 PM