fbpx
April 2, 2020
javascript dialogue box

JAVASCRIPT DIALOGUE BOX | Adding Dialogue Box To Web Pages

In this tutorial we will be looking at JavaScript dialogue box which entails how to add dialogue boxes to web pages using JavaScript. In our previous tutorial we looked at JavaScript page redirect, where we explained the methods used in redirecting web pages using JavaScript. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: JAVASCRIPT PAGE REDIRECT | Redirect Web Pages Using JavaScript

JAVASCRIPT DIALOGUE BOX

A dialogue box is a simple small window that comes up on web pages, giving the user a warning information, a confirmation or instructing the user to input values. Dialogue boxes are very important when building web pages and they serve their purpose. Sometimes you might want to send an information to the user when a wrong action is carried out on the web page or inform the user about an activity that has not been completed yet. Such actions can only be carried out easily with the help of dialogue box.

There are different types of dialogue box used on web pages and they include:

  • Simple Alert dialogue box
  • Confirmation dialogue box
  • Prompt dialogue box

The Simple Alert Dialogue Box

We have been making use of this dialogue box in our previous tutorials. The simple alert dialogue box is mostly used to give warning to users when certain action is carried out by the user on the web page. This alert box offers the user an “OK” option which can be used to quite the dialogue box window. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <title>SIMPLE ALERT DIALOGUE BOX IN JAVASCRIPT</title>
<script type="text/javascript">
function diaFuncti(){
   alert('Warning!!! Form Not Completed') 
}
</script>

</head>
<body>
   <input type="button" value="click me" onclick="diaFuncti()">
</body>
</html>

RESULT

SIMPLE ALERT DIALOGUE BOX IN JAVASCRIPT

The Confirmation Dialogue Box

The confirmation dialogue box is mostly used to confirm a users action before performing it. Sometimes you see dialogue boxes showing information such as “Do you want to continue without saving?” on a web page. This is an example of what the confirmation dialogue box is used for. The confirmation dialogue box also provides the user with two options which are “OK” or “CANCEL”. The “OK” approves the action while the “CANCEL” disapproves the action and returns the page back to the previous state. The confirmation dialogue box can be embedded on the web page with the help of a confirm() method as shown below.

Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <title>DIALOGUE BOX IN JAVASCRIPT</title>
<script type="text/javascript">
function diaFunct(){
   var onPrint = confirm('do you want to continue');
  if(onPrint==true){
     document.write('user wants to continue');
     return true;
  }
  else{
     document.write('user does not want to continue')
     return false;
  }
}

</script>

</head>
<body>
   <input type="button" value="click me" onclick="diaFunct()">
</body>
</html>

RESULT

DIALOGUE BOX IN JAVASCRIPT

Prompt Dialogue Box

The prompt dialogue box is used to collect user input using a simple pop up box. The prompt box allows the user to interact with the web page by inputting the required value before clicking “ok”. The prompt dialogue box can be inserted on the web page with the help of a prompt() method which takes in two values: A label and a string like placeholder. Example shown below

<!DOCTYPE html>
<html lang="en">
<head>
   <title>SIMPLE PROMPT DIALOGUE BOX IN JAVASCRIPT</title>
<script type="text/javascript">

function diaPrompt(){
   var boxPrompt = prompt("insert your name:", "your fullname here")
   document.write('your name is: ' + boxPrompt);
}
</script>
</head>
<body>
   <input type="button" value="click me" onclick="diaPrompt()">
</body>
</html>

RESULT

SIMPLE PROMPT DIALOGUE BOX IN JAVASCRIPT

CONCLUSION

Javascript dialogue box are very important when building a simple or complex web page. We hope with the help of this tutorial you should be able to structure dialogue box on your web page using JavaScript.

NEXT TUTORIAL: JAVASCRIPT – VOID KEYWORD

Leave a Reply

Your email address will not be published. Required fields are marked *