In this post we will discuss how to use PreSaveAction() method in SharePoint list form in SharePoint 2013/2016/Online. We will see how to use PreSaveAction() in newform.aspx in SharePoint Online/2013/2016.
PreSaveAction() a JavaScript function which helps us to do something before the item will be saved. Suppose in the list form you want to do some validation check when a user clicks on the submit button then PreSaveAction() will be very much helpful. This method called before the form is submitted.
You can use PreSaveAction() in NewForm.aspx or EditForm.aspx in any SharePoint Online/2013/2016 list.
Example of using PreSaveAction() in SharePoint List
In this example, I have a SharePoint list which has a Title column which is a mandatory field. Now I am using PreSaveAction() JavaScript function to check whether Title is blank or not. If it is blank then it will display an alert message and it will not save the item. If Title is not blank then it will Save the item
Here I have using jQuery to retrieve Title column value, but you can use SPUtility.js to retrieve the field value as well.
I have edited the NewForm.aspx and put the below code inside a Script editor web part.
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>
<script type=”text/javascript”>
var j = jQuery.noConflict();
function PreSaveAction() {
var txtTitle = j(“:input[title=’Title’]”).val();
alert(txtTitle);
if(txtTitle == ”){
alert(“Please enter a title”);
return false;
}
else{
return true;
}
}
</script>
Save the page and try to add an item to the SharePoint list. If your title is blank and you click on the Save button then it will show the alert like below:
You may like following SharePoint tutorials:
- Get dropdown selected value and selected text using jQuery inside script editor web part in SharePoint Online
- Script editor and Content editor web part missing in SharePoint Online Office 365
- Retrieve site workflow id using JavaScript Object model in SharePoint Online
- Quick Chart Web Part in Modern SharePoint Online Site
- SharePoint Online Group Calendar Web Part Tutorial
In the same way, you can use PreSaveAction() in editoform.aspx page in SharePoint Online list. Hope this article will be helpful to you, to know more about how you can use presaveaction() in SharePoint 2013/2016/Online.
-: FREE PDF e-Book Download :-
51 JSOM Examples in SharePoint Online
Enter Email ID to get TOP 51 JSOM (JavaScript Object Model) examples (100+ Pages) PDF FREE directly into your Email Inbox.
You May Also like the Following SharePoint Online Tutorials:
