Save changes made in a custom edit.aspx form, then set and update list item

Question

I have two lists that I am creating custom edit forms for (connected via task actions in a SPD 2013 workflow) and am having trouble getting some functions to work. The overall function I'm trying to add is pretty much the same for both list forms, so I will just use one for example.

On the my custom edit.aspx forms, I have a few input buttons on the bottom toolbar: Submit Update, Reopen, and Cancel Request. I am using these buttons to set a hidden field in the item to trigger the workflow to continue (code for the "Cancel Request" posted below).

function cancelRqst() {
    var list;
    var Id = SP.ScriptHelpers.getDocumentQueryPairs()["ID"];
    var siteurl = "/sites/[my site's name]"
    var rqStatus = ' ';
    var item;

    var cnfm = confirm("Are you sure you want to cancel this request?. Press 'OK' to continue")
        if (cnfm == true){
            var context = new SP.ClientContext(siteurl);
            list = context.get_web().get_lists().getByTitle('Request Log');                                                     
            var item = list.getItemById(Id)                                                             
            item.set_item('UpdateCancel', 'Canceled');
            item.set_item('Status', 'Closed');
            item.update();                                                      
            context.executeQueryAsync(onCxlQuerySucceeded, onQueryFailed);
        }   
    function onCxlQuerySucceeded(sender, args){
        alert('Request ID ' + Id + ' has been canceled. Closed requests may be reopened within 10 days of closing.');
        var dispUrl = "/sites/.../Lists/.../DispForm.aspx?ID=" + Id;
        window.location.href= dispUrl;

    }       
    function onQueryFailed(sender, args){
        alert('Action failed. ' + args.get_message() + '\n' + args.get_stackTrack() + '. If problem persists, contact a site administrator');
    }       
}

My issue is getting the changes to the text fields in the edit form to save. For instance; when a user submits a request, a task item gets created. If the reviewer rejects that task for not having enough detail, the user goes into his request item to edit, fills in their updated detail field (multiline text), and hit's the "Submit Update" button, which triggers the workflow to send an updated task item to the reviewer.

Originally, I had the button setup as:

<input: type="button" id="cxlButton" value="Cancel Request"/>

and the function would trigger using:

(function(){
    $(document).ready(function(){
        $('#cxlButton').click(function(){
        //my coding here.. etc.. etc..
        });
    });
})(); 

but per the advice of different answers on forums from old questions, I decided to try adding the function to the button and calling it this way (took it out of the wrapped functions and $(document).ready):

<input type="button" value="Cancel Request" id="cxlButton" onclick="javascript:{ddwrt:GenFireServerEvent(concat('__commit;__redirect={rqstedit.aspx?ID=',$ListItemId,'}'))}; cancelRqst()"></input>

This will redirect it back to the edit form after committing, but it won't trigger my cancel request function.

Here is a similar post on the issue, but I couldn't seem to get any of these answers to work.

Any advice will help. Let me know if you have any questions or need me to clarify anything.

Thanks in advance!

Answer 1

So I was able to figure out how to update the changes I need without needing to use:

{ddwrt:GenFireServerEvent(concat('__commit;__redirect={rqstedit.aspx?ID=',$ListItemId,'}'))}; myfunction()"></input>

From this blog post, I used var mytextinput = document.getElementById('element_id').innerText (or .value, for dropdown fields) to get the values of the edit form fields, and then listItem.set_item(mytextinput)

I used the DOM explorer in F12 to find the element Id's.

Here is a full example (custom task edit form button to 'reject' the request and update the comments/rejection reason field):

(function(){
var commentsinput;
var rejectreason;
var selreason;
var Id;
var siteurl = "/sites/'your site name'";
$(document).ready(function(){
    $('#sendbackbutton').click(function(){
        var cnfm = confirm("Press 'OK' to continue"); //Reject/Send Back button
        if (cnfm == true){
            Id = SP.ScriptHelpers.getDocumentQueryPairs()["ID"];
            var context = new SP.ClientContext(siteurl);
            var list = context.get_web().get_lists().getByTitle('Request Response Tasks');
            var item = list.getItemById(Id);

            item.set_item('Status', 'Completed'); //marks task as complete (to trigger 'wait for task completion'
            item.set_item('CustomOutcome', 'Send Back'); // sets the custom task outcome

            commentsinput = document.getElementById('your element id').innerText; // gets the inputs from multi-line text box
            item.set_item('Response_x002f_Comments', commentsinput); // sets the field to the above

            selreason = document.getElementById('your element id');
            rejectreason = selreason.value;
            item.set_item('Reason', rejectreason);  

            item.update();
            context.executeQueryAsync(onRejectSucceeded, onQueryFailed);
        }
    });
});
function onRejectSucceeded(sender, args){
    alert("Response sent.");
    var dispUrl = siteurl + '/Lists/"your list name"/DispForm.aspx?ID=' + Id;
    window.location.href=dispUrl;
}
function onQueryFailed(sender, args){
    alert('Action failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}})();

Unfortunately, you'll need to add that step for each field you want to update; in my case there are only two fields that the user will be selecting/writing in.

Let me know what you think! I'd love to hear any comments or suggestions on how to improve this.