Using JavaScript’s Inbuilt Confirm() Function

This inbuilt function has a return type of boolean and the value can either be TRUE or FALSE. TRUE when you provide a positive response FALSE when you ...

Simon Ugorji

2 years ago | 2 min read

I am sure that you know about the Inbuilt confirm() function that prompts a user to confirm an action.

This inbuilt function has a return type of boolean and the value can either be TRUE or FALSE.

TRUE when you provide a positive response
FALSE when you provide a negative response or you canceled the prompt.

Let's try this in our console.

confirm("Are you human");

This is the output when I click on Ok.

In the output above, I provided a positive response and the return value was TRUE.

APPLICATION

In your Forms, you might want the users to double-check the form they are trying to submit, using the event listener onsubmit and passing return confirm ("Are you sure?").

<form method="post" onsubmit="return confirm('Are you sure you want to submit?')">

<button type="submit">Submit</button>
</form>

Now what this does is to prompt the user with the message Are you sure you want to submit?. If the user provides a positive response, the form will submit just fine but if the user provides a negative response, the form will not submit.

IN YOUR FUNCTION

There's a way to use this inbuilt function in your function block.

Supposing we have a button on our App that allows users to delete all records. It is necessary to have this prompt in place so that the action will not be executed mistakenly by merely clicking on the button.

For example, we have a button like this;

<button onclick="delRecords()"> Delete All </button>

You can't use the onsubmit attribute directly on the button because it's not a form. So in your function block, you can do something like;

function delRecords() {
if( confirm ("Are you sure you wish to delete all? ") === true )
{
//something magical happens here
}
}

The code above is quite simple because we used a conditional statement to display the message and to check the return value too.

First, when the button has been clicked, it will prompt the user with the message Are you sure you wish to delete all? when the user provides a positive response, the rest of the code will execute. But if the user provides a negative response, nothing happens.

ALTERNATIVE ACTIONS

You can also modify the code to execute an action based on a Negative response.

Supposing we have an age-restricted site, we can insecurely check if the user is below a certain age like this;

if( confirm("I am above 18 years") === true ){
//proceed
}else{
window.location.assign("./");
}

Using the else{} block, you can execute an action when a negative response is provided.

CONCLUSION

As opposed to using the onsubmit attribute, you can use a conditional statement in your function to display the prompt, proceed if the user provides a positive response, and execute an action if a negative response was provided.

Thank You!

Software Engineering

Programming

Upvote

Created by

Simon Ugorji

Backend Developer | PHP | JS