Override Default Cancel Button on Ribbon in SharePoint 2013 or SharePoint 2016

In this SharePoint 2013 tutorial we will explore, how to Override default cancel button on a SharePoint form on the ribbon under Edit tab in the commit section. I would like to share my knowledge on this and be of some help there by saving your time.

First, we remove the default Cancel button from the ribbon and add a new custom Cancel button in the same place with the same classes and the same image.

The only thing is when a Cancel button is clicked; a certain set of operations were performed before redirecting the page back to the source.

Here, I have demonstrated this just by showing a confirmation box on clicking Cancel button and redirected the form back to the list view.

Cancel button is given below.

override default cancel button sharepoint 2013
override default cancel button sharepoint 2013

Following Cancel button, we have the confirmation box, which appears on hitting Cancel.

sharepoint 2013 cancel button redirect
sharepoint 2013 cancel button redirect

To achieve this, we have a code given below, which can be used as it is.
In the document.ready, I have called the overrideCancel() function.

$(function () {



Inside the override function, I have taken care of the required classes, which is required by Cancel button. I creates all the required elements on runtime, which will hold the button.

Out of these elements we have the image element. You have to get an image of Cancel button and save it somewhere in the site. Therefore, we specify the path of the image in the code.

function overrideCancel() {

var input = document.createElement(‘a’);

input.title = “Cancel”;

input.role = “button”;

input.id = “custominput”;



var firstSpan = document.createElement(‘span’);

firstSpan.id = “fSpan”;



var innserSpan = document.createElement(‘span’);

innserSpan.id = “iSpan”;





var cancelImg = document.createElement(‘img’);

cancelImg.src = _spPageContextInfo.webAbsoluteUrl + “/Style Library/CSS/Images/CancelRibbon.png”;


var lbl = document.createElement(‘span’);

lbl.id = “lblSpan”;




$(“#custominput”).click(function () { Cancel() });


Finally, I have written the code for Cancel function call, which is when called will display the confirmation box and on OK, click the form, which will redirect otherwise on clicking Cancel. It is just the confirmation box, which is closed and the form remains in the same state.

function Cancel() {

var url = _spPageContextInfo.webAbsoluteUrl + “/Lists/ListName/AllItems.aspx”;

if (confirm(“You have clicked on the overridden Cancel button, are you sure you want to close this form?”)) {

window.location = url;


else {

return false;



You may like the following JavaScript tutorials:

Hope, this article helps everyone to achieve something of this kind.