Home
|
Developer Home
|
Accessibility
|
ASP
|
CGI/Perl
|
DHTML
|
HTML
|
Includes
|
Javascript
|
PHP
|
Style Sheets
|
You are here : Home - Web Development - Javascript - Alert Guide Demo
<!--
function demo(){
var the_name = document.ex_form.yourname.value;
if (the_name == ""){
if(confirm("Do you want to enter your name now ?\n\nOK=Yes - Cancel=No")){
var full_name = prompt("What is your name ?","");
if (full_name == null){
alert("You must have a name\n");
return;
}
else if (full_name == "" || full_name == " "){
the_name = "";
alert("You must have a name\n");
return;
}
else
{
the_name = full_name;
document.ex_form.yourname.value = the_name;
alert("I have changed your name in the form\n");
}
}
else
{
return;
}
}
alert("Thank you, " + the_name +" for trying this demo.");
}
// -->
</script>
<form ACTION="" name="ex_form">
Your Name : <input type="Text" name="yourname" align="LEFT" size="20">
<input type="button" name="Submit" value="Demo Now" onclick="demo();">
</form>
Javascript alert prompt confirm demo
In the previous pages we saw how to use javascript alert, prompt and confirm boxes. So for the closing chapter I have put a small demo together. It's not the most complicated demo but it does give a good example of how you can provide useful assistance to your visitor.
Everything in moderation though, don't expect your visitor to be impressed if they have to contend with too many dialog boxes - less is more :)
Leave the 'Your Name' field blank then click on the 'demo now' button.
The demo code
<script language="JavaScript" type="text/javascript"><!--
function demo(){
var the_name = document.ex_form.yourname.value;
if (the_name == ""){
if(confirm("Do you want to enter your name now ?\n\nOK=Yes - Cancel=No")){
var full_name = prompt("What is your name ?","");
if (full_name == null){
alert("You must have a name\n");
return;
}
else if (full_name == "" || full_name == " "){
the_name = "";
alert("You must have a name\n");
return;
}
else
{
the_name = full_name;
document.ex_form.yourname.value = the_name;
alert("I have changed your name in the form\n");
}
}
else
{
return;
}
}
alert("Thank you, " + the_name +" for trying this demo.");
}
// -->
</script>
<form ACTION="" name="ex_form">
Your Name : <input type="Text" name="yourname" align="LEFT" size="20">
<input type="button" name="Submit" value="Demo Now" onclick="demo();">
</form>
So thats it, all done :) I hope you found this guide to dialog boxes useful. If you have any comments, good or bad, about this guide then why share them in our forum. All comments are greatly appreciated. Thanks... Andy
[
]
[
]
]
[]