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

Ahamed Fazil Buhari
 
Senior Developer
May 30, 2018
 
Rate this article
 
Views
6512

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.

clip_image002

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

clip_image004

 

 

 

 <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.

clip_image006

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.

clip_image007

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

Author Info

Ahamed Fazil Buhari
 
Senior Developer
 
Rate this article
 
Ahamed is a Senior Developer and he has very good experience in the field of Microsoft Technologies, especially SharePoint, Azure, M365, SPFx, .NET and client side scripting - JavaScript, TypeScript, ...read more
 

Leave a comment