How to redirect to a different page by cancel button

Question

I have a custom list. I edited it's URL's source to redirect to a diferent page if a new item is saved. ("Thank you" page for filling the form). But it is redirecting there even if the user select the "cancel" button. So I would like to redirect to a different page if the "cancel" button is selected instead of the "save". How can I do that? Using SP 2013. I can add javascript by script editor, but I don't know how to edit specificly the "cancel" button's URL.

Answer 1

to accomplish you need a script to do the following:

1-add a new custom cancel button.
2-hide the original Cancel buttons.
3-add the redirect action to the custom button.
4-hide the Ribbon cancel.

here is the script

<script>
function cancelRedirect()
{
 window.location.href = 'http://sp/cancelpage'
}

function overrideCancel()
{
//add a custom input button
var input = document.createElement('input');
input.type = "button";
input.name = "Cancel";
input.value = "Cancel";
input.id = "custominput";
document.querySelectorAll('.ms-toolbar input[value=Cancel]')[1].parentNode.appendChild(input);
document.getElementById("custominput").setAttribute("class", "ms-ButtonHeightWidth");

//Hiding already implemented cancel buttons
document.querySelectorAll('.ms-toolbar input[value=Cancel]')[0].style.display = "none";
document.querySelectorAll('.ms-toolbar input[value=Cancel]')[1].style.display = "none";

//redirect the form
document.getElementById("custominput").setAttribute("onclick", "cancelRedirect();");
}
_spBodyOnLoadFunctionNames.push('overrideCancel');
</script>

<style>
#Ribbon\.ListForm\.Edit\.Commit\.Cancel-Large
{
display:none;
}
</style>  

Code source from Here

Answer 2

This is an older article, but should still work. It does not remove the existing cancel button, only changes its destination, and it lets you set the cancel destination in the URL.

http://techtrainingnotes.blogspot.com/2009/06/sharepoint-redirecting-to-page-after.html

Answer 3

I solve this will a little jQuery to redirect the cancel back to the homepage (with a bonus of renaming the button in case that interests you - "save / cancel" isn't always grammatically appropriate).

<script  type="text/javascript">
$(document).ready(function () {
    $("input[value=Cancel]").attr('value', "Go Back"); 
    $("input[value='Go Back']").click(function() {window.location.assign("https://your.site.example/cancelPage.aspx")});

});
</script>

Answer 4

You can use below script to redirect "Cancel" to desired location.

<script language="javascript" type="text/javascript" src="/jQuery Libraries/jquery-1.4.2.min.js"></script><script language="javascript" type="text/javascript">
    $(document).ready(function() { // This will unbind the existing click event 
    $("button[Value='Cancel']").unbind("click'"); // Then bind your own 
    $("button[Value='Cancel']").bind("click", function() {
  alert("User clicked on Cancel");
    window.location.replace("example.com"); //Your desired url to redirect  
     });
    });
    </script>

Reference: MSDN Article