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


Ahamed Fazil Buhari
SharePoint Developer
Published On :   30 May 2018
Visit Count
Today :  6    Total :   417



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

Categories