TechTuts - Learn. Share. Create.

JS Alerts, Prompts And Confirms

Learn all about javascript alerts, prompts and confirm scripts

How do I make JavaScript alerts? JavaScript alerts are annoying little pop-ups that most kids love (and most adults don't lol). There are several different versions listed here. You can place these scripts anywhere in the body tag.

Alert on click:

      <form ACTION=URI><input type="button" value="click here" onClick='alert("Your message here")'></form>

A nicer version:

      <form ACTION=URI><input type="button" style="background:#9900ff" value="click here" onClick='alert("Your message here")'></form>

Alert on mouseover:

      <a href=""onMouseover="alert('write your message here')">Put your own words here</a>

Alert upon entering page:

      <SCRIPT language="JavaScript type="text/javascript"">alert("your message here")</SCRIPT>

More than one alert upon entering page:

      <script language="JavaScript type="text/javascript"">
      <!-- start script
      alert("Your message here");
      alert("Your message here");
      alert("Your message here");
      // end script -->
      </script>

Alert upon leaving page:

      <body onunload="alert('your message here');">

Alert upon entering AND leaving page:

      <body onload="alert('Your enter message here');"
      onunload="alert('Your exit message here');">

Alert upon entering page with time and date shown:

      <script language="JavaScript" type="text/javascript">
      <!-- Hide the JavaScript from older browsers
      document.write("Having a great day?")
      document.write("<BR>")
      document.write("Today's date is ",Date())
      // End hiding of script -->
      </script>

Alert upon leaving page showing time spent on your page:

This code gets pasted in your HEAD tag:

      <script language="JavaScript" type="text/javascript"><!-- var onHours = " "; var onMinutes = " "; var onSeconds = " "; var offHours = 0; var offMinutes = 0; var offSeconds = 0; var logSeconds = 0; var logMinutes = 0; var logHours = 0; var OnTimeValue = " "; var OffTimeValue = " "; var PageTimeValue = " "; // Back to previous page. function WinOpen() { getLogoffTime(); } // Loads HTML page to full window for View Source. function WinOpen1() { alert('nPage will load to full screen.nnUse View/Document Source from menu bar to view source.nnClose new window to return to this page. '); window.open("js-timer.htm","DisplayWindow","menubar=yes,scrollbars=yes"); window.open("js-timer.htm","DisplayWindow","menubar=yes,scrollbars=yes"); } // Captures logon time. function getLogonTime() { var now = new Date(); // Used to display logon time. var ampm = (now.getHours() >= 12) ? " P.M." : " A.M." var Hours = now.getHours(); Hours = ((Hours > 12) ? Hours - 12 : Hours); var Minutes = ((now.getMinutes() < 10) ? ":0" : ":") + now.getMinutes(); var Seconds = ((now.getSeconds() < 10) ? ":0" : ":") + now.getSeconds(); // String to display log-on time. OnTimeValue =(" " + Hours + Minutes + Seconds + " " + ampm); // Capture logon time for use in timer(). onHours = now.getHours(); onMinutes = now.getMinutes(); onSeconds = now.getSeconds(); } function getLogoffTime() { var now = new Date(); // Used to display logoff time. var ampm = (now.getHours() >= 12) ? " P.M." : " A.M." var Hours = now.getHours(); Hours = ((Hours > 12) ? Hours - 12 : Hours); var Minutes = ((now.getMinutes() < 10) ? ":0" : ":") + now.getMinutes(); var Seconds = ((now.getSeconds() < 10) ? ":0" : ":") + now.getSeconds(); // String to display log-off time. OffTimeValue =(" " + Hours + Minutes + Seconds + " " + ampm); // Capture logoff time for use in timer(). offHours = now.getHours(); offMinutes = now.getMinutes(); offSeconds = now.getSeconds(); timer(); } // Compute difference between logoff time and logon time. function timer() { if (offSeconds >= onSeconds) { logSeconds = offSeconds - onSeconds; } else { offMinutes -= 1; logSeconds = (offSeconds + 60) - onSeconds; } if (offMinutes >= onMinutes) { logMinutes = offMinutes - onMinutes; } else { offHours -= 1; logMinutes = (offMinutes + 60) - onMinutes; } logHours = offHours - onHours; // Used to display time on page. logHours = ((logHours < 10) ? "0" : ":") + logHours; logMinutes = ((logMinutes < 10) ? ":0" : ":") + logMinutes; logSeconds = ((logSeconds < 10) ? ":0" : ":") +logSeconds; // String to display time on page. PageTimeValue =(" " + logHours + logMinutes + logSeconds); displayTimes(); } function displayTimes() { alert("Thank you for visiting my Site nLOG ON TIME : " +OnTimeValue+"nnLOG OFF TIME : "+OffTimeValue+"nnTIME ON PAGE : " + PageTimeValue); } // --> </script>

This code gets pasted into your BODY tag:

      <body onUnLoad="WinOpen()" onLoad="getLogonTime()";>

How do I make JavaScript prompts? A JavaScript prompt is a popup window that asks for information from your visitor. Here are some examples of JavaScript prompts:

The following code will display a greeting and your visitors name on your page if they type their name into the prompt screen. Add this code into your <Head> tag:

<script language="javascript" type="text/javascript"> <!--- start of javascript hide var Firstname=prompt("Enter your Firstname :","Firstname"); // unhide ---> </script>

And add this code into your <body> tag where you want the prompt text to show up on your page:

<script language=JavaScript> <!--- start of javascript hide document.write("<center><h1>Hiya" + " "); document.write(Firstname + " "); document.write("</h1></center>"); //unhide ---> </script>

Here is a JavaScript prompt that asks for a password, and if the password is correct it will take your visitor to the password protected page. NEVER NEVER NEVER use this for anything important. It is just a fun script that is absolutely not foolproof in any way. Almost anyone on the net would be able to figure out how to get around this script LOL, put this script in the head tag:

      <script language="JavaScript" type="text/javascript">
      <!--hide
      var password;
      var pass1="yourpasswordhere";
      password=prompt('Enter your password in order to view this page!',' ');
      if (password==pass1)
      alert('YAY you got it right! Click OK to enter!');
      else
      {
      window.location="http://www.techtuts.com";
      }
      //-->
      </script>

Here is another version of a JavaScript prompt that can allow your visitor to change the background color of your Web site, on mouseover, if you use a solid color background:

<a href="" onMouseOver="var bg=prompt('What color would you like?');document.bgColor=bg">Put your cursor over this link to change background color!</a>

Here's a JavaScript prompt that asks your visitor for their name, and welcomes them with an alert after they fill in their name:

      <script language="javascript" type="text/javascript">
      var name = prompt("Write your name below:","Write it here.");
      alert("Welcome "+ name +" to my page!!!");
      </script>

How do I make JavaScript confirms? A JavaScript confirm is an alert that asks your visitor to decide between 2 choices you offer them.

This confirm warns your visitor to "Enter at your own risk" and if they press cancel, will be taken to another Web site:

      <script language="javascript" type="text/javascript">
      var stay=confirm("Enter at your own risk!! Press "ok" to enter, "cancel" to exit immediately!")
      if (!stay)
      window.location="http://www.techtuts.com"
      </script>

Overview Tutorial Comments
Forward Report

Tutorial Categories

Partners

JS Alerts, Prompts And Confirms