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

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?

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()   
{
    alert(this.event.target.id) 

    // 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 
}
</script>

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

• Edited by Jaydeep MungalparaMicrosoft community contributor 12 hours 41 minutes ago

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

 :

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

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

$("[id^='Ribbon.buttonsaveSomething]")

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

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()   
{
    alert(this.event.target.id) 

    // 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 
}
</script>

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

• Edited by Jaydeep MungalparaMicrosoft community contributor Wednesday, June 17, 2015 7:02 PM
• Proposed as answer by KRISHANA KUMAR Friday, July 10, 2015 10:21 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...

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:

• https://msdn.microsoft.com/en-us/magazine/dn745867.aspx
• http://www.rbradbrook.co.uk/blog/2013/06/06/customising-the-newform-with-jslink/

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

Thanks Jaydeep,

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

Hey Sohel,

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

Thanks

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"
 class="ms-ButtonHeightWidth"
id="bottomSaveBtn"
 accesskey="O"

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

Not specific to Knockout/Angular but you will get very JSLink specific examples at https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a.