What we are going to do is very simple. First of all we will create the code for a button that will trigger a simple alert box. Then we are going to create a confirm box and a prompt box.
The code itself is very simple and will pop up an alert box with an "ok" button. In order to close the box, the user needs to click the "ok" button.
The following is a good example:
The code behind it is:
The onclick event will call a funtion (open_alert) that will actually use the alert command to make the alert box pop up. As you can see it is more difficult to explain than to implement.
alert("Hello! Welcome to The Web Thought!");
<input onclick="open_alert()" type="button" value="Click me!" />
The confirm boxIf the alert box has only an "ok" button, the confirm box has an "ok" button and a "cancel" button. It is mainly used to - guess what - confirm something. If the user clicks "ok" the box returns "true", if the user clicks "cancel" the box returns "false".
The basic syntax is:
Let's see it in action:
Again the code behind it is:
In this case, we assign a variable r as value returned by the confirm command. We then check for the returned value: if it's true or false.
var r=confirm("Choose between ok or cancel");
<input onclick="open_confirm()" type="button" value="Click me!" />
The prompt boxLast but not least, the prompt box which will ask the user to fill in a box (prompt). The command will return the input value if the user clicks "ok", or null if the user clicks "cancel".
First of all, the syntax:
The text is just the text inside the pop up, while the defaultvalue is the default value inside the input box.
The code is very simple:
var name=prompt("What's your name?","Denny Crane");
if (name!=null && name!="")
alert("Hello " + name + "!");
<input onclick="show_prompt()" type="button" value="Click me!" />
Please share your thoughts about it!