Custom Save Button On Custom SharePoint List Forms

We have already discussed in our previous blog, how to make a custom list form using Sharepoint Designer.
Now, we will create custom buttons that will save data to a Sharepoint list without writing any code in REST or JSOM.
 
 
Now, go to Sharepoint Designer and open the custom new form that we have created from the forms gallery of the list in Sharepoint Designer as shown below.
 
SharePoint  
Click on CustomNewForm.aspx and this would open the aspx code of the CustomNewForm in Sharepoint designer.
 
The custom new form looks like below in the browser.
 
SharePoint
As you can see, there are two Save Buttons on the form.

To remove the Save buttons on the top find the below piece of code,
  1. <table>  
  2.     <tr>  
  3.         <td width="99%" class="ms-toolbar" nowrap="nowrap">  
  4.             <IMG SRC="/_layouts/15/images/blank.gif" width="1" height="18" />  
  5.         </td>  
  6.         <td class="ms-toolbar" nowrap="nowrap">  
  7.             <SharePoint:SaveButton runat="server" ControlMode="New" id="savebutton1" /> </td>  
  8.         <td class="ms-separator"> </td>  
  9.         <td class="ms-toolbar" nowrap="nowrap" align="right">  
  10.             <SharePoint:GoBackButton runat="server" ControlMode="New" id="gobackbutton1" /> </td>  
  11.     </tr>  
  12. </table>  
And add the highlighted code as below.
  1. <table>  
  2.     <tr style="display:none">  
  3.         <td width="99%" class="ms-toolbar" nowrap="nowrap">  
  4.             <IMG SRC="/_layouts/15/images/blank.gif" width="1" height="18" />  
  5.         </td>  
  6.         <td class="ms-toolbar" nowrap="nowrap">  
  7.             <SharePoint:SaveButton runat="server" ControlMode="New" id="savebutton1" /> </td>  
  8.         <td class="ms-separator"> </td>  
  9.         <td class="ms-toolbar" nowrap="nowrap" align="right">  
  10.             <SharePoint:GoBackButton runat="server" ControlMode="New" id="gobackbutton1" /> </td>  
  11.     </tr>  
  12. </table>  
This will hide the above save button on the form so the new custom form looks like this.
 
SharePoint  

Now add the following code to add the custom button and use OOTB Sharepoint functionality to save the data in the Sharepoint list.
  1. <tr>  
  2.     <td> <button type="button" value="Save And Exit" name="btnSave" onclick="javascript:{ddwrt:GenFireServerEvent('__commit;__redirect={/teams/******/Pages/Home.aspx}')};">Save And Exit</button> </td>  
  3. </tr>  
Now, the form will have a custom button Save and Exit which will save the data in a sharepoint list just like OOTB sharepoint button.
 
SharePoint  
 
Advantages of custom Button
  1. We can redirect the page anywhere we like after saving data in the list.
  2. We can run custom code by calling a javascript function (Discuss in next blog) to run validations and set values based on button click which is not possible in PreSaveAction functionality (to be discussed in the next blog)
  3. No need to write custom Rest or JSOM code to save data. 
Hope this is helpful. Feel free to post comments if you have any query.