none
How to add "Apply" button on New/Edit form of listItem at Sharepoint 2013. RRS feed

  • Question

  • Hi.
    I have a task in Sharepoint 2013 to add to standard adding and editing forms the "Apply" button. After you click on it you need to save the data and remain on the form. The standard save button should be left on the form, so I ruled out the option to simply replace the Source parameter in the URL.
    First, I wanted to deal with the edit form.
    What are the options I've tried and what you're facing:
    On the form I added a web part in which the linked javascript.
    I copied the "Save" button, which has the following form:

    <input type="button" name="ctl00$ctl40$g_06d7dccf_c05b_4800_a59e_1eff3a633045$ctl00$toolBarTbl$RightRptControls$ctl00$ctl00$diidIOSaveItem" value="Сохранить" onclick="if (!PreSaveItem()) return false;if (SPClientForms.ClientFormManager.SubmitClientForm('WPQ2')) return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl40$g_06d7dccf_c05b_4800_a59e_1eff3a633045$ctl00$toolBarTbl$RightRptControls$ctl00$ctl00$diidIOSaveItem&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))" id="ctl00_ctl40_g_06d7dccf_c05b_4800_a59e_1eff3a633045_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOSaveItem" accesskey="O" class="ms-ButtonHeightWidth" target="_self">

    1. When the form is loaded I have added the save button replacing the "SaveItem" to "CommitItem" in the parameters name, id, and onclick. And added the option to redirect to the current page.

    <input type="button" name="ctl00$ctl40$g_06d7dccf_c05b_4800_a59e_1eff3a633045$ctl00$toolBarTbl$RightRptControls$ctl00$ctl00$diidIOCommitItem" value="Сохранить" onclick="if (!PreSaveItem()) return false;if (SPClientForms.ClientFormManager.SubmitClientForm('WPQ2')) return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('ctl00$ctl40$g_06d7dccf_c05b_4800_a59e_1eff3a633045$ctl00$toolBarTbl$RightRptControls$ctl00$ctl00$diidIOCommitItem','',true,'','" + this.location.href + "',false,true))" id="ctl00_ctl40_g_06d7dccf_c05b_4800_a59e_1eff3a633045_ctl00_toolBarTbl_RightRptControls_ctl00_ctl00_diidIOCommitItem" accesskey="O" class="ms-ButtonHeightWidth" target="_self">

    This decision led to the fact that the data was not saved, but the redirect was performed, the form remained updated information, but if I close the form and again opened a data item was old.

    2. I decided to try a different approach. On onclick I change the current URL and cause a click on the save button:

    window.history.pushState("", "", this.location.href.replace(oldSource, newSource));savebtn.click();
    window.history.replaceState("", "", this.location.href.replace(oldSource, newSource));savebtn.click();

    In this case, all remained, but was redirected to a list of all elements.

    3. I saw the option of adding this button:

    <input type=”button” value="Submit” name="btnSave" onclick="javascript: {ddwrt:GenFireServerEvent('__commit;__redirect={_MyURL_}')}" />

    But I have error: Uncaught ReferenceError: GenFireServerEvent is not defined at HTMLInputElement.onclick

    What I did wrong or what approach can you tell me for my problem?

    Friday, March 3, 2017 3:29 PM

Answers

  • Hi,

    Please add the following JavaScript into a content editor web part in New/Edit list item form.

    <script src="http://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){	 
    	var button = $("input[id$='SaveItem']");	 
    	button.removeAttr("onclick");
            button.val("Apply");
    	button.click(function() {
    		var elementName = $(this).attr("name");
    		var aspForm = $("form[id='aspnetForm']");
    		var oldPostbackUrl = aspForm.get(0).action;
    		var currentSourceValue = GetUrlKeyValue("Source", true, oldPostbackUrl);
    		var newPostbackUrl = oldPostbackUrl.replace(currentSourceValue, encodeURIComponent(window.location.href));
     
    		if (!PreSaveItem()) return false;
    		WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(elementName, "", true, "", newPostbackUrl, false, true));
    	});
    });
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Monday, March 6, 2017 7:50 AM
    Moderator

All replies

  • Hi,

    Please add the following JavaScript into a content editor web part in New/Edit list item form.

    <script src="http://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){	 
    	var button = $("input[id$='SaveItem']");	 
    	button.removeAttr("onclick");
            button.val("Apply");
    	button.click(function() {
    		var elementName = $(this).attr("name");
    		var aspForm = $("form[id='aspnetForm']");
    		var oldPostbackUrl = aspForm.get(0).action;
    		var currentSourceValue = GetUrlKeyValue("Source", true, oldPostbackUrl);
    		var newPostbackUrl = oldPostbackUrl.replace(currentSourceValue, encodeURIComponent(window.location.href));
     
    		if (!PreSaveItem()) return false;
    		WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(elementName, "", true, "", newPostbackUrl, false, true));
    	});
    });
    </script>

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Monday, March 6, 2017 7:50 AM
    Moderator
  • Hi,

    Any update?

    Did you try to use my solution?

    If my reply solution help you, please mark the reply as answer, it will make others who stuck with the similar issue easier to search for valid solutions in this forum.

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, March 9, 2017 7:14 AM
    Moderator
  • But with this the people picker fields are not getting saved. Please help.
    Tuesday, October 3, 2017 4:49 PM
  • If I add the below code, the page redirects to the previous base page, but all the data gets saved. And, when I remove the below code, it remains in the page but not all data is getting saved.

    if (SPClientForms.ClientFormManager.SubmitClientForm('WPQ2')) return false;

    Mu use case is to save all the data and remains in thesame form page.

    Tuesday, October 3, 2017 6:38 PM
  • I want to propose a solution, that similar to already accepted one, but with few modifications, because the answer didn't completely work for me as expected.

    var btnOK = $("input[id$='SaveItem']:last");
    var btnApply = btnOK.clone();
    btnApply.val("Apply");
    btnApply.removeAttr("onclick");
    btnApply.click(function () {
        var postUrl = $("#aspnetForm").attr("action");
        $("#aspnetForm").attr("action", location.pathname + "?ID=" + GetUrlKeyValue("ID") + "&Source=" + encodeURIComponent(postUrl));
     
        if (!PreSaveItem()) return false;
        if (SPClientForms.ClientFormManager.SubmitClientForm('WPQ2')) return false;
        WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions($get(WPQ2FormCtx.SubmitButtonID).name, "", true, "", "", false, true));
    });
    btnOK.after(btnApply);

    Friday, September 14, 2018 9:03 AM