Last Updated on October 2, 2020 by Roshan Parihar
Javascript dialog box comes in many places like when you want to execute a code or when the user agree for the condition on clicking of the ok button or any other. If the user clicks on the cancel button of the confirmation box, the given code will not gets executed.
What is Javascript Dialog Box
A Javascript dialog box is the box where you get user confirmation or some other user input data. It’s an alert box which gives warning or informational messages to the user on clicking of the button or occuring of events.
How to Write Javascript Dialog Box and Get User Confirmation
To get dialog box for user confirmation, you have to use the Javascript confirm(). The confimation box comes with confirm() contains the two user event buttons – “Ok” and “Cancel”. If the user clicks on the ok button, the function returns the true value. But, if the user clicks on the cancel button, it returns false.
Let’s see the simple example given below.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function myConfirmation(){ var getConfirm = confirm("Do you want to continue?"); if(getConfirm == true){ alert("Welcome to Tutorialdeep."); }else{ alert("You have cancelled!"); } } </script> <button onclick="myConfirmation()" class="btn btn-primary">Get Confirmation</button> |
Output
The above example contains the alert message which will display on true and false return of the confirm function. Click the button given above and give your confirmation and then see the output as a result of confirmation.
Get User Input in the Javascript Dialog Box
If you want to get the user entered content in the alert box, you can use Javascript prompt(). A prompt() requires two arguments as the input where first argument is the label for the input box and second is the place holder of the input box.
The prompt result out an alert box which contains the labels and the input box with the placeholder.
Let’s see the example given below.
|
1 2 3 4 5 6 7 |
<script> function myPromptConfirm(){ var getPromptConfirm = prompt("Enter Your Name: ","Put your name here"); alert("You have entered: " + getPromptConfirm); } </script> <button onclick="myPromptConfirm()" class="btn btn-primary">Get Prompt Confirmation</button> |
Output
Enter the text you want to enter in the input box given in the alert dialog box. After you enter the text in the alert input box, a next alert comes that contains the text you have entered in the prompt input box.
You must also read.