Hide Save button in New and Edit form in SharePoint 2013 list

This SharePoint tutorial explains, how to hide the save button from the ribbon in SharePoint 2013 list form using JavaScript and CSS.

We have a SharePoint list where we have customized the input form using InfoPath. And in that customized InfoPath form we have a custom Save button and we are saving the item from the default data connection. This button also has some validation rules.

So we do not want any user to insert an item by clicking on the Ribbon Save button. They should only be able to save through our Submit button which was presented inside the InfoPath form.

You can disable the Save button from the InfoPath form submit properties. But we do not want to show the Save button at all. Be default the submit button appears like below:

Hide Save button in New and Edit form in SharePoint 2013 list
Hide Save button in New and Edit form in SharePoint 2013 list

We have written the JavaScript and CSS code to hide the Save button. For this Edit the page and then Insert a Script editor web part into it. Then write the below code inside the script editor web part and save the page.

<script type=”text/javascript”>
function hideEdit() {
var edit = document.getElementById(“Ribbon.ListForm.Edit.Commit.Publish-Large”);
edit.style.display = “none”;
}
_spBodyOnLoadFunctionNames.push(“hideEdit”);
</script>

Once you will Save the Save button will be hidden as shown in the fig below:

Hide Save button in New and Edit form in SharePoint 2013 list
Hide Save button in New and Edit form in SharePoint 2013 list

You may like following SharePoint tutorials:

This SharePoint tutorial, we learned how to hide Save button in New and Edit form in SharePoint list.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>