Hide Save Button From Ribbon In SharePoint

Introduction

Many times in SharePoint we want to perform different things which are not possible by using the available features which SharePoint provides Out of the Box.

Hiding Save button in the SharePoint list forms ribbon is one of them.

Usually, when we create/edit a new item in SharePoint lists, we have two Save buttons available. One is in top ribbon of the page and another one at the end of the form controls.

Let's suppose, we have a scenario where we don't want two save buttons in SharePoint list forms (i.e. in "NewForm.aspx" and "EditForm.aspx").

In this post, I will show you how we can hide Save button from the ribbon of list forms i.e. "NewForm.aspx" and "EditForm.aspx" using simple JQuery code.

Prerequisite

For implementing this functionality, we would require:

• Basic knowledge of JQuery/JavaScript
• Basic knowledge of SharePoint such as editing page, adding web part to a page
• JQuery library reference from the JQuery CDN which we will be adding to our JQuery script

Implementation

So, lets see how we can hide Save button from the list forms ribbon.

Let's suppose, we have a list name as "Test" list as shown below:

We will now go to the "NewForm.aspx" page by clicking on "+ new item" link button and we will hide the below shown "Save" button appearing in the ribbon of "NewForm.aspx" page:

To do the same, we will edit this "NewForm.aspx" page by clicking on "Site Settings" button and then clicking on "Edit Page" as shown below:

Once "NewForm.aspx" page is in edit mode, we will click on "Add a Web Part" link and then from the "Categories", we will select "Media and Content". Once "Media and Content" category is selected, under the "Parts" section, we will select "Script Editor" and then we will click on "Add" button as shown below:

Now, you have added "Script Editor" web part to your "NewForm.aspx" page, click on "EDIT SNIPPET" link of "Script Editor" web part and write the below line of code in it and click on "Insert" button:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script type="text/javascript">

    $("a[id$='Ribbon.ListForm.Edit.Commit.Publish-Large']").hide();

</script>

As you can see, in the above code, in first line we are referencing to JQuery CDN library. And in third line, we are finding the ID of "Save" button in the ribbon of list form page and then hiding it by using JQuery's hide function.

Once the code is inserted into the "Script Editor" web part, on top left corner of your page, in the ribbon under "PAGE" tab, click on "Stop Editing" as shown below:

When you click on "Stop Editing" button in a ribbon, you will be redirected to the list's "AllItems.aspx" page.
From there, click on new item link button to navigate to "NewForm.aspx" page or to create a new item for the list. You will notice now in "NewForm.aspx" page, there is no "Save" button displaying in the ribbon as shown below:

So, as you can see by following above steps and using simple JQuery code, we can hide "Save" button appearing in ribbon for "NewForm.aspx" page.

By following the similar steps we did for "NewForm.aspx" page, we can hide "Save" button in"EditForm.aspx" page as well. There will be no changes in the code for hiding the "Save" button in "EditForm.aspx" page.

Conclusion

In this post, we have seen one of many ways to hide "Save" button appearing in the ribbon of list forms for SharePoint list.