I am trying to add one new custom button near the save button on a newform.aspx of my list in a SharePoint Online site.

Here is the current content editor web part (CEWP) code in the newform.aspx, which needs improvement:

    <script src="https://code.jquery.com/jquery-1.10.2.min.js" 
     <script type="text/javascript">
    $(document).ready(function () {
    // for Save button
     alert(' docu ready');

     var saveCancelText='<input type="button" id="saveBtn" value="Save1233" class="ms-ButtonHeightWidth"></input>&nbsp;&nbsp;&nbsp;<input type="button" id="cnclBtn" value="Cancel" class="ms-ButtonHeightWidth" 
    onclick='javascript: if( PreSaveAction() ) 
   {ddwrt:GenFireServerEvent('__commit')}'  ></input>';

 $(".ms-formtoolbar > tbody > tr").append(saveCancelText);

Running the code fails to show the custom button because of onclick event

  ` onclick='javascript: if( PreSaveAction() ) 

How can I call the onClick event inside document.ready? I can't call this on presaveaction().

Any idea how I can trigger an event on click of this custom save button and call PreasaveAction and perform my custom validation? I want to redirect to a different page, editform.aspx with an ID in the querystring parameter.

  • You just want to redirect to edit form of that newly created item? @pradadwt Commented Oct 24, 2018 at 17:04

2 Answers 2


Modify the code as below to call the onclick event of custom buttons inside document.ready.

<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () { 
    var saveCancelText='<td><input type="button" id="saveBtn" value="Save1233" class="ms-ButtonHeightWidth"></input></td><td><input type="button" id="cnclBtn" value="Cancel" class="ms-ButtonHeightWidth"></input></td>';
    $(".ms-formtoolbar > tbody > tr").append(saveCancelText);
    //custom save button click event            
    $(document).on("click", "#saveBtn", function(){
        alert("savebtn click!");
    //custom cancel button click event
    $(document).on("click", "#cnclBtn", function(){
        alert("cnclBtn click!");

If you only want to redirect from newform page to edit form page, we can get last item id of list using REST API and redirect the edit form page.

Reference: Customize newform save button - Save and redirect to another form

  • am facing multiple issues, while redirecting with ID="+newlycreatedID, and AND IT ALWAYS redirecting to allitems.aspx.. in the second approach , i tried by changing the code in the ?source querystring paarameter , it goes to editform,without querystring param.! if i use the above mentioned customs ave button, can i implement jsom, by accessing the fields, explicitly and submit the data into splist, without using presaveaction?
    – dasarp
    Commented Oct 25, 2018 at 9:00
  • We can validate list fields data and using REST API with jQuery Ajax to add item to list directly. And in the success method of ajax, we can get the list item id, and redirect edit page. Refer to: c-sharpcorner.com/article/…
    – LZ_MSFT
    Commented Oct 25, 2018 at 9:11
  • @LZ_MSFT What if the last item is deleted? Commented Oct 25, 2018 at 16:00

Add the below code in CEWP below NewForm.aspx:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

function PreSaveAction(){
    var URL = location.pathname.replace('NewForm.aspx','EditForm.aspx');
    return true;


Reference: Redirect from NewForm to Disp/Edit Form

  • when i tested the above code, it navigates to the EditForm, without the newly created ITEMID . I wanna attach the ID of the last created item in this EditForm.
    – dasarp
    Commented Oct 25, 2018 at 9:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.