One feature worth implementing when designing websites is to add confirmation to forms. A simple popup message saying “Are you sure?” can greatly enhanced the user experience. It gives users a chance to confirm or escape out of a certain function. This is particularly feature is valuable after users click the Save, Delete or Submit button.

Unfortunately, both HTML and PHP languages lack the feature to add confirmation to forms. We turn our attention to Javascript the popup confirmation message we need in our forms. Below, you will see a simple, plain vanilla, submit button inside a HTML form.

HTML Form

<input type="Submit" name="submit" value="Submit" />

To add a confirmation to our submit button, we will use Javascript’s onclick event to detect if the input object has been clicked. Here’s how we add the onclick event in our simple form.

<input type="Submit" name="submit" value="Submit"
onclick="return confirmation();" />

Javascript Confirmation

Where’s our Javascript function? Well, here it is. Now that we have added the onclick event to our submit button, we will now add our Javascript function that you can place anywhere on your page. Here it is:

<script>
function confirmation()
{
var answer = confirm("Are you sure?")
 if (answer)
 {
  return true;
 } else {
  if (window.event) // True with IE, false with other browsers
  {
   window.event.returnValue=false; //IE specific
  } else {
   return false
  }
 }
}
</script>

The if statement with window.event is for the IE browser since it doesn’t play nice like the other browsers. You can call the Javascript function multiple times on the same page every time you need a popup confirmation. So there you have it, a simple popup confirmation you can add to your forms.