Redirect With Cancel Button

When working with HTML Forms, a Cancel button is sometimes handy when you want to reset a form. It deletes the user’s input and displays the same form again. This is particularly helpful to users that want to reset a form from scratch and start with a new form entry.

Here’s a simple HTML page called “form.html” that uses the “post” form method and uses an action to itself – the same page which is “form.html.” The form also contains a Cancel button which will be rendered using the input markup below. Notice the input type is set to “submit.”

Cancel Button To Reset Form

<form method="post" action="form.html">
<label for="firstname">Firstname:</label><br/>
<input type="text" name="firstname" value="" />
<input type="submit" name="submit" value="Submit" />
<input type="submit" name="cancel" value="Cancel" />

Redirect With The Cancel Button

To use redirect with the Cancel button, we will use a simple Javascript event called “onclick=window.location” to send the user to another page called “anyfile.html.” We can also redirect the user to another domain if we want to such as “” Notice the input type is now changed from “submit” to “button.” This is very important. The input type needs to be set to “button,” otherwise our redirect will never work.

<input type="button" name="cancel" value="Cancel"
onclick="window.location='anyfile.html'" />

This is just a simple way to redirect users with the Cancel button. There are other ways of redirecting users such as using Javascript functions, etc., but it’s beyond the scope of this article.