How to get which Save button is clicked on OOB Sharepoint list form RRS feed

  • Question

  • Hi,

    This is regarding the customization of the OOB List form using jQuery. I want to customize it with jQuery.

     I would like to use the Save,Cancel button from the Toolbar but I wanted to extend the functionality of Save , Cancel from the List form 

    Basically , I want to distinguish between Save from the toolbar to Save button from the form shown in this picture below.

    The reason is because I can override function PreSaveItem()  function and have different behavior upon clicking on Save button

    Save Cancel :

    Please throw me the ideas, how we can fire certain events in "Save" vs "Save(From tool bar)" so i can use that in PreSaveItem function

    Rakesh K

    Tuesday, June 16, 2015 7:10 PM

All replies

  • Hi Rakesh,

    Which version you are using SP, I cant see the save button when we edit the item or add new item, secondly you can press F12 button and and find out the ID of the both button based on the click event of button ID you can trace like which button is get clicked. 

    You can also try also FireBug or TEMPLATE\GLOBAL\XML\CMDUI.XML in the 14 hive.Is folder creation enabled on that library? Under Advanced Settings

    So once you have its id you find tag using jquery


    let us know if you could not find the ID of both the button or stuck somewhere.

    Krishana Kumar
    Please mark the replies and Proposed as answer if they help and solve your issue

    Tuesday, June 16, 2015 7:28 PM
  • Hi,

    If you are trying to find out if save button is clicked from form or ribbon, I'm not sure how to do that. But if you would like to validate something before save, you can do this with JSLink. Basically you can hook your code in SharePoint's form validation logic and validate your own logic. More details:

    If possible better to use JSLink solution as it's recommended way of modifying SharePoint Out-of-the-box forms.

    Sohel Rana

    Wednesday, June 17, 2015 2:37 AM
  • Thanks!

    Im using SP 2013. Did you tried finding out which button was clicked in PreSaveItem() ?

    I know F12/Firebug : Jquery. but that does'nt help the problem here

    Rakesh K

    Wednesday, June 17, 2015 3:25 PM
  • Thanks Sohel.

    I know CSR is the new functionality introduced. But My requirement is , if at all I have to switch back to custom coding (lets say form based or APp based solution) . I can't re use the code. While if i develop native jQuery and things like this. I can very well use that .! Did you get what I mean?

    Rakesh K

    Wednesday, June 17, 2015 3:27 PM
  • Hi Rakesh,

    You will find the only difference between both of them is the ID of the button. Have below code block to find the same using CEWP in new/edit form of list/library.

    <script type="text/javascript">
    function PreSaveAction()   
        // i.e Save button Id in Toolbar which contains 'top_RightRptControls'
        // ctl00_ctl33_g_7ee68656_29f0_44e8_9e8b_958f3a50c17d_ctl00_toolBarTbltop_RightRptControls_ctl01_ctl00_diidIOSaveItem
        // Save button Id at bottom
        // ctl00_ctl33_g_7ee68656_29f0_44e8_9e8b_958f3a50c17d_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem 

    Thanks. Please mark it as an answer if it helps.

    Wednesday, June 17, 2015 6:58 PM
  • Hi Rakesh,

    You can still make your code reusable by keeping your logic in separate js file (knockout model or angular controller). JSLink just provides a way of hooking your code/method in SharePoint form events/scripts.

    The downside of using traditional approach (like hooking your code directly in button click event) is that SharePoint is a platform and you never know just hacking something will not break anything else. Also when you will upgrade to new SharePoint version or move to cloud, the JSlink should still work as it's supported natively in SharePoint. But anything you do bypassing recommended approach, will not be granted to work or not to break something else.

    So my recommendation would be to check the recommended approach (JSLink or you can override the ribbon all together) and then if doesn't help then look for alternatives. Sometimes we need to bypass recommended approach but you can make sure whatever you are trying not really possible with recommended approach...

    Sohel Rana

    Thursday, June 18, 2015 1:01 AM
  • Thanks Jaydeep,

     Its SP 2013. that would be PreSaveItem(), and this.event itself is giving undefined. 

    Rakesh K

    Thursday, June 18, 2015 9:07 PM
  • Hey Sohel,

     Do you have any example where you implemented AngularJS /Knockout Js in OOB New/Edit Forms?


    Rakesh K

    Thursday, August 20, 2015 3:29 PM
  • Hi,

    Very first thing, the "PreSaveAction" function is common for the button type in the Ribbon as well as the button you see here at bottom of the page.

    You cannot differentiate by using the "PreSaveAction" function.

    Alternatively, please look in to this code, I copied from the Developer tools and replaced the long id for the button with shorter one for clarity.

    <input name="bottomSaveBtn"
    onclick="if (!PreSaveItem()) return false;
    if (SPClientForms.ClientFormManager.SubmitClientForm('WPQ2')) return false;
    WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("bottomSaveBtn", "", true, "", "", false, true))" type="button" value="Save" target="_self">

    on onclick function, try to replace with your own JavaScript function either manually or through JS.

    You can do it by identifying the input id.

    I feel this could save your time and elegant way of differentiating what save button has been clicked on the form.

    Murugesa Pandian | MCPD | MCTS | SharePoint 2010 |

    Please remember to mark your question as answer if this solves your problem.

    Thursday, August 20, 2015 6:28 PM
  • Not specific to Knockout/Angular but you will get very JSLink specific examples at

    Sohel Rana

    Friday, August 21, 2015 2:01 AM