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.

• How to create a custom save button on .ASPX page?
• How to redirect on button click in .ASPX page?
• How to call a custom function on button click in .ASPX page?
• How can we pass a parameter in a redirection URL?

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

<input style="margin:0" id="customSave" type="button" value="custom Save" name="btnSave" onclick="if (!ExecuteThisFunctionBeforeSavingAndRedirecting()) return false; {ddwrt:GenFireServerEvent('__commit;__redirect={webAbsoluteUrl/Lists/ListName/NewForm.aspx?isCustomSaved=Yes}')}" />

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.

onclick="if (!ExecuteThisFunctionBeforeSavingAndRedirecting()) return false;”

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.

__redirect={webAbsoluteUrl/Lists/ListName/NewForm.aspx?isCustomSaved=Yes}

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 

function ExecuteThisFunctionBeforeSavingAndRedirecting() {
    //Do Something
    if (!PreSaveItem()) return false;
    else return true;
}

function PreSaveItem() {
    //Do Validation Code
}

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.