Adding a confirmation pop-up for a new List Item in SharePoint 2013

I was recently asked if we could ask the user for confirmation when a new Item is added to a List. The user needed to confirm that that the data entered was correct when clicking Save on the form.

I added a short jQuery script to the List NewForm.aspx page to overwrite the default action for the Submit button. The script replaces the onclick event with a confirm dialog.

(in SharePoint 2013 but I can’t see why it would not also work in 2010)

  • First we need the ID of the Save button on the New Item form. Open your List and click New Item.
  • Next right-click on the Save button and click Inspect Element (in IE – other browsers will be slightly different)SaveButtonIDWe want the above ID of button highlighted, keep this somewhere safe – in my case it is ctl00_ctl48_g_3a39bc1b_9cda_48cf_af8a_346e6e3b88a5_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem
  • Next open the Site up in SharePoint Designer, click on Lists and Libraries in the left hand navigation and select your List
  • Right click on NewForm.aspx and Edit File in Advance Mode

SPD NewForm Edit

  • Now search through the markup and find where the first table element is closed </table> and insert the script below replacing [BUTTON_ID] with the ID from earlier.

[code lang=”js”]
<script type="text/javascript">
$(function() {
$(‘input[value=Save]’).removeAttr("onclick");
$(‘input[value=Save]’).click(function() {
var answer = confirm("Are you sure to want to complete this reservation?");
if (answer)
{
if (!PreSaveItem()) return false;
if (SPClientForms.ClientFormManager.SubmitClientForm(‘WPQ1’)) return false;
WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("[YOUR ID HERE]", "", true, "", "", false, true)); }
else{
return false;
}
});
});
</script>
[/code]

  • Save the page and accept the changes