Create Custom Save and Redirect Button On A SharePoint Form

Recently, I got a requirement, where I had to create a custom save button on a SharePoint Form and on the click of the button, I had to do some operation before triggering validation and ultimately save the item and redirect, so I would like to share my knowledge on it and the way of implementation.

Here, we will be learning the following.

First, create an HTML input tag with type button on .ASPX page. Let’s say I have done it on EditForm.aspx.

It is onclick, where we have to do some operations before saving so write and check if the function returns true to proceed and save, as shown below.

If the function executes correctly and returns true, the form is saved, using the command given below. {ddwrt:GenFireServerEvent('__commit')}

Now, for committing and redirecting to another location, let’s say here that we are redirecting to the NewForm. We write - {ddwrt:GenFireServerEvent('__commit;__redirect={webAbsoluteUrl/Lists/ListName/NewForm.aspx}')}

After redirecting, when NewForm opens; it will be same as created on new item and not the redirected form, so for this, set a parameter in the redirection URL.

Second, the operation which you need to perform has to be coded somewhere. I have included that particular function in JavaScript file and gave the reference of the NewForm.js in the ScriptEditor Webpart inserted on EditForm.aspx.

NewForm.js

Here, once the operation is done, call for the PreSaveItem(); function where the code for validation is present.

If the PreSaveItem returns true, the forms saves successfully and redirects, else the form doesn’t save.