I found a couple great functions that allow me to programmatically call up a modal edit form, and they work very well. What I'm looking for is a way to update a div on the calling page with the contents of the modal form's UserNote field once I click the Submit button.

function displayProgInfo(progId) {
  var options = SP.UI.$create_DialogOptions();
  options.resizable = 1;
  options.scroll = 1;
  options.title = "Update Program Information";
  options.url = "/address/_layouts/listform.aspx?PageType=6&ListId={[ListID]}&ID=" + progId;
  options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);

function CloseCallback(result, target) {
  if (result != 0) {
    window.parent.location.href = window.location.href;
    // Replace the note after clicking save in the modal dialog
    htmlBuilder = "<div id='noteField'>" + [contents of UserNote field] + "</div>";

The hangup right now is how to capture and save the contents of the UserNote field before the form closes. The articles and questions I've found so far don't offer me much that I understand; can anyone provide an answer that helps in this situation?

1 Answer 1


On your edit form, you need to add the onclick handler for your Submit button and pass UserNote field's value as an argument.


var userNoteFieldValue =  encodeURIComponent(document.getElementById(userNoteFieldId).value);
<input type="button" value="Submit" class="button" href="javascript:void(0);" onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, {userNoteFieldArg: '" + userNoteFieldValue + "'});" />    

then on CloseCallback function, you can access the passed in argument(s).

CloseCallback = function(result, args) {
        if (result == SP.UI.DialogResult.OK) {
            document.getElementById("noteField").innerHTML = " " + decodeURIComponent(args.userNoteFieldArg);
        if (result == SP.UI.DialogResult.cancel) {
            // Run Cancel Code

Alternate method:

function CloseCallback(result, args) {
    if (result == SP.UI.DialogResult.OK) {
        getListItemById(progId, 'YourListName')
    if (result == SP.UI.DialogResult.cancel) {
        // Run Cancel Code

function getListItemById(progId, listName) {
    var context = new SP.ClientContext.get_current();
    //var context = new SP.ClientContext('/siteUrlHere');
    var web = context.get_web();
    var list = web.get_lists().getByTitle(listName);
    var item = list.getItemById(progId);
    context.load(item, 'myUserNoteField');
        function () {
            var userNoteField = item.get_item('myUserNoteField');

        }, function (sender, args) {
            alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
  • Aveenav, thank you for the response! I'm having difficulty figuring out how to implement what you've provided. I think my biggest problem is that I'm used to seeing parameter lists on functions, so the fact that I'm using CloseCallback without arguments yet the function definition uses parameters is really messing with me. Also, I'm using the out of the box SharePoint edit form, so I don't know how to call commonModalDialogClose when clicking on the default form's Save button. Can you provide your first example in more detailed context? Sep 5, 2014 at 14:11
  • For the above solution to work, you'd need to customize the edit form. --Alternate method-- Since you already have the item ID, do a CSOM query to get the updated field. See the updated answer.
    – Aveenav
    Sep 5, 2014 at 18:59
  • Aveenav, I apologize that this question is morphing, and I appreciate your patience. I think at this point the thing I'd like to do is simply pass the progId on from displayProgInfo in the original post to CloseCallback. Do you know how to pass it along so that CloseCallback can just make use of it? Sep 8, 2014 at 13:11

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.