Redirect to custom page from SharePoint OOTB Form button click using jQuery

Hello everyone,

In this article we will see how to redirect to different page after click on Save or Cancel or Close OOTB button available in default Forms for SharePoint lists. By default after you click on those button available in New, Edit or Display form it will be redirected to the corresponding SharePoint list. If you do not want this to happen then please follow below steps,

Open NewForm or EditForm or DispForm where you would like to change the default functionality of button click. And add the below script in Script Editor Webpart.

In Edit page of your form, add the script editor web part

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script>
 $(document).ready(function() {
   var targetURL =
     "https://fazilbuhari.sharepoint.com/sites/Demo/custompage.aspx";
   $("input[value='Cancel']").attr(
     "onclick",
     "location.href='" + targetURL + "';"
   );
 
   var saveButton = $("input[value='Save']");
   // change redirection behavior
   saveButton.removeAttr("onclick");
   saveButton.click(function() {
     if (!PreSaveItem()) return false;
     if (SPClientForms.ClientFormManager.SubmitClientForm("WPQ2")) return false;
 
     var oldActionUrl = $("#aspnetForm").attr("action");
     var oldSource = GetUrlKeyValue("Source", true, oldActionUrl);
     var newActionUrl = oldActionUrl.replace(
       oldSource,
       encodeURIComponent(targetURL)
     );
     var elementName = $(this).attr("name");
     WebForm_DoPostBackWithOptions(
       new WebForm_PostBackOptions(
         elementName,
         "",
         true,
         "",
         newActionUrl,
         false,
         true
       )
     );
   });
 });
 </script>
 

Copy and paste the above script and click on Insert, then save the page. Do not forgot to change the targetURL value in the script.

Now if the user clicks on Save or Cancel button, then it will be redirected to the Target URL which we provided in the script.

If you want to implement this only for Close button in DispForm.aspx, then use the below script.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script>
 $(document).ready(function() {
   var targetURL =
     "https://fazilbuhari.sharepoint.com/sites/Demo/custompage.aspx";
   $("input[value='Close']").attr(
     "onclick",
     "location.href='" + targetURL + "';"
   );
 });
 </script>
 

Happy Coding

Ahamed