Update File Name with jQuery in Edit Form

Question

I am trying to change the name of a file in a list edit form depending on a value selected in a lookup column.

nCName = $("input[title^='Name']")

function UpdateDocumentName(selectedOption){
    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl +"/_api/web/lists/GetByTitle('CRMNamingConvention')/items?$filter=NCDocument eq '" + selectedOption + "'",
        type: "GET",
        headers: {
            "accept": "application/json;odata=verbose",
        },
        success: function (data) {
            var result = data.d.results[0].NCDocumentSubject;
            nCName.val(result)
        },
        error: function (error) {
            alert(JSON.stringify(error));
        }
    });
}

Stepping through the code in the debugger all looks good. The correct value is retrieved for the document subject and the name field is updated with the value.

The problem occurs when I click Save. Instead of the item being saved, the selected value in the document subject field gets replaced with '(None)' and the value that was selected appears in an error span below. Also, the value in the name field reverts to the original value.

The form remains open and no error appears in the debugger console. If I click save again, the item saves with the original name value and nothing in the document subject field.

Any suggestions?

Answer 1

I see my error. I wasn't populating the options for the control selecting the selectedOption properly. I didn't include the Id in the option value. Here is the updated code.

var options = jQuery.map(data.d.results, function(val, i){
                return [{"Id": val.Id, "Subject":val.NCDocument}]
            });
            
            $.each(options, function (k, val){
                nCDocument.append('<option value="' + val.Id + '">' + val.Subject + '</option>');
            });