Save and Submit functionality in new form of SharePoint online list

Question

I have a requirement where if user comes to fill new item form, user should stay on the new form itself on click of 'save' button and once he click 'submit' it will get submitted. Technically on click of 'save' button , user should be redirected to 'Edit Form' retrieving the newly created item. As I am using sharepoint online so I need some javascript solution. Any help will be appreciated.

I am following below link but i didn't get any output.

http://spjsblog.com/2011/04/23/redirect-from-newform-to-dispform-or-editform/

Answer 1

To achieve that in SPO, follow the steps below:

Edit the NewForm.aspx and add the following script to NewForm.aspx:

<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    // for Save button
    var button = $('input[name$="SaveItem"]'); 
    button.removeAttr("onclick"); 
    button.click(function() {
        var listUrl = "https://<tenant>.sharepoint.com/sites/<site>/Lists/<list>";
        var listName = "<list>";
        var parameter = "itemStatus"; 
        var value = "new"; 
        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, listUrl+"/EditForm.aspx?"+parameter+"="+value);
        if (!PreSaveItem()) return false; 
        WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(elementName, "", true, "", newPostbackUrl, false, true));
    });
});
</script>

Edit the EditForm.aspx and add the following script to EditForm.aspx:

<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>
<script type="text/javascript">
function GetParameterValues(param) {  
    var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');  
        for (var i = 0; i < url.length; i++) {  
            var urlparam = url[i].split('=');  
            if (urlparam[0] == param) {  
                return urlparam[1];  
            }  
        }  
}

$(document).ready(function () {
    var listUrl = "https://<tenant>.sharepoint.com/sites/<site>/Lists/<list>";
    var itemStatus = GetParameterValues("itemStatus");
    // check id there are id parameter in the current path
    var id = GetParameterValues("ID");
    if(itemStatus !== null && id == null){
        if(itemStatus == "new"){
            //get the latest item
            var itemId = $().SPServices.SPGetLastItemId({   
                listName: "<list>"
            });
            if(itemId !== null){
                // reload the EditFrom.aspx
                var newPath = listUrl+"/EditForm.aspx?ID=" + itemId;
                window.location.href = newPath;
            }
        }
    }

});
</script>

Note: Change "<>" strings to your site and list information.