The Cancel Button
You are making an edit form for a site. The form allows a users to make changes to something and submit the changes to the database. This is a typical scenario - but what if that user starts to edit the entry, but then they change their mind and want to cancel out - how is the best way to cancel out of the form?
There are a few ways to handle the cancel process and I want to examine why you should or shouldn't use each of them.
The Form
This is a standard HTML form. It can have inputs and stuff and a submit button. It is however missing the cancel button we are interested in.
<form action="processor.php" method="post">
<!-- inputs and stuff -->
<input type="submit" name="submit_button" value="Submit">
</form>
The Cancel Button
So here are some ways to Cancel
BEST OPTION: With Javascript version 1
This uses Javascript to execute a redirect to the Cancel.php page. This does not submit the form. Another positive is that the submit and cancel buttons looks the same. This may be the best option there is, since we are basically making the Cancel button act like a link, without compomising the look of the form
<form action="process.php" method="post" >
<!-- inputs and stuff -->
<input type="submit" name="submit" value="submit" />
<input type="button" name="cancel" value="cancel" onClick="window.location.href='http://yoursite.com/cancel.php';" />
</form>
Why this is a good option
- It uses a default browser button element - this means your submit button and your cancel button will look the same.
- It doesn't submit any Post Variables
- Minimum coding required
NEXT BEST: With PHP
In this version we let PHP do the canceling. Create another Input, of the type "Submit" named the same as your "Submit" button (so in the case below name="submit_button"). Then in your processing script put an " if " statement to handle the $_POST[submit_button] value of "Cancel"
<form action="processor.php" method="post">
<!-- inputs and stuff -->
<input type="submit" name="submit_button" value="Submit">
<input type="submit" name="submit_button" value="Cancel">
</form>
// In Processor.php
<?php
if ($_POST['submit_button'] == "Cancel")
{
header("Location: cancel.php");
}
?>
Why this might be good
If it isn't that far outside your routing logic it may make the most sense to handle your cancelation routing this way.
Why this might not be good
- It requires your script to be processed. This means the browser will have to send all of the data to the server and the server will have to process and decide what to do.This is also wasteful from the server perspective - Your website is working, when the work could be pushed to the user's computer using Javascript.
- Variables are being Posted. Why are we posting variables when we are actually trying to cancel a post?
- Your redirection logic isn't in the same file as your button. This can make it difficult to keep track of everything - however this may be a good thing if you are used to handling routing separate from your controls.
OKAY OPTION: With a Form
In this version we are offering a completely separate form for the user to submit. A form is being submitted, just not the one that offered editing. The form will handle the routing of the interaction. In this scenario the additional form submits the "cancel" input along with the value of "Cancel" If you aren't looking for that Post value on the Cancel.php then it will just load the page. The second form will handle the redirection.
<form action="process.php" method="post" > <!-- inputs and stuff --> <input type="submit" name="submit" value="Submit" /> </form> <form action="cancel.php" method="post" > <input type="submit" name="cancel" value="Cancel" /> </form>
Why this is okay
The form element handles the redirection. It works. Also the button element looks the same as the other form button elements. It will be on a different line, but that might not be a deal breaker.
Why this might not be good
It is another form, and the page does have to process. While it works, it might not be the most semantic way to build your site.
NOT GOOD: With Javascript version 2
This method uses a HTML button element with a javascript onClick event to link to the new page. I tried the method with the button tag both inside the form as well as outside the form and it worked in my version of Firefox. The alignment of the button is below the form if the button element is outside of the closing form tag. When the cancel button is inside the form it does submit the form - but it doesn't save because my script logic not receiving the submission variable I'm looking for. This could be a problem - even though it works.
<form action="process.php" method="post" > <!-- inputs and stuff --> <input type="submit" name="submit" value="submit" /> </form> <button onClick="window.location.href='http://yoursite.com/cancel.php';" />Cancel</button>
Why this isn't a good option
If the button element is inside the form - it does submit, however it may not execute the save if you have your routing and script set up to accordingly. But I could definitely see instances where the save script is just looking for a submit and this button element triggers that command. THIS CAN BE AVOIDED if you put the button element outside of the form. For this reason I would opt out of using this option and go for option Javascript 1 explained above.
With a Link
This method works really well - it uses HTML so it isn't dependent on server side processing or client side processing. The only real issue with this is that the cancel button isn't a button - it's just a link. To this point, you could use CSS to style the anchor tag and make it appear like a button, but that might seem hackish too.
<form action="process.php" method="post" > <!-- inputs and stuff --> <input type="submit" name="submit" value="submit" /> <a href="http://yoursite.com/cancel.php">Cancel </form>
Why this isn't a good option
If you don't care about style - this will work, but in my opinion the vast difference in UI design make this a no-go.
In Closing
There may be other options that are even better that I haven't even considered. I'd love to hear them. Feel free to argue with me @Harbison on twitter
