Populate textbox based on dropdown selection from a Sharepoint list

Question

I have a SharePoint list called "Products" (containing 4 columns - Product, Manager, Approver, Status)

I have a dropdown list that populates the 'Product' column of the 'Products' list.

Say I select 'Soap' from the dropdown list, the corresponding value to 'Soap' is 'Mr.XYZ' as the approver in the 'Approver' column of the 'Products' list.

So upon selecting 'Soap' in the dropdown, I want the value 'Mr.XYZ' to be populated in a HTML Textbox.

I have achieved populating the dropdown using REST API and it works as expected as follows:

appendProducts();

function appendProducts() {
    $.ajax({
        url: "https://abc/_api/web/lists/GetByTitle('Products')/items?$select=Title",
        type: "get",
        dataType: 'json',
        headers: {
            "Accept": "application/json;odata=verbose"
        },
        success: function (data) {
            var values = [];
            var uniqueValues = [];
            var option = "";
            var valuesArray = data.d.results;
            $.each(valuesArray, function (i, result) {
                values.push(result.Title);
            });
            $.each(values, function (i, el) {
                if ($.inArray(el, uniqueValues) === -1) {
                    uniqueValues.push(el);
                    option += "<option value='" + el + "'>" + el + "</option>";
                }
            });
            $("#ddlProducts").append(option);
        },
        error: function (data) {
            alert(data.responseJSON.error);
        }
    });
}

The following is my textbox ID:

<input id="txtapprover" />

Please help me populating the Textbox with the corresponding value selected in the dropdown. How can this be achieved best?

Thanks in advance :)

Answer 1

You can change your query to also get the Approver's display name, and then make that the value of the drop-down options, so when the drop-down changes, you can set the text box accordingly.

Please note that the only part of this code that has been tested is the query, to make sure I got the $expand syntax correctly, and to make sure I got the difference in how that data is returned depending on if the Approver's field allows multiple selections or not.

function appendProducts() {
    $.ajax({
        url: "https://abc/_api/web/lists/GetByTitle('Products')/items?$select=Title,Approver/Title&$expand=Approver/Title",
        type: "get",
        dataType: 'json',
        headers: {
            "Accept": "application/json;odata=verbose"
        },
        success: function (data) {

            // change values to be an object instead of an array
            var values = {};

            var uniqueValues = [];
            var option = "";
            var valuesArray = data.d.results;
            $.each(valuesArray, function (i, result) {

                // if Approver field is single user only
                // use this line and delete the next one
                values[result.Title] = result.Approver.Title;

                // if Approver field allows multiple selections
                // use this line and delete the previous one
                values[result.Title] = result.Approver.results[0].Title;
            });

            // the above code will build up an object with the keys being the products
            // and the values being the approver name, like this:

            // { 
            //     Soap: 'Mr.XYZ',
            //     Pencil: 'Mr.ABC'
            // }
            //

            // you can then loop through the key/value pairs

            $.each(values, function (key, value) {
                if ($.inArray(key, uniqueValues) === -1) {
                    uniqueValues.push(key);

                    // now we are storing the approver name as the option's true value,
                    // and the product name as the visible text for the option
                    option += "<option value='" + value + "'>" + key + "</option>";
                }
            });
            $("#ddlProducts").append(option);

            // add a change handler to the drop-down list so when the selection changes,
            // the value of the selected option (the approver's name) gets put into the text box
            $('#ddlProducts').change(function() {
                $('#txtapprover').val(this.value);
            });
        },
        error: function (data) {
            alert(data.responseJSON.error);
        }
    });
}

Answer 2

The following worked for me :

function appendManager() {
    var product = $('#ddlProducts').val();
    $.ajax({
        url: "https://abc/_api/web/lists/GetByTitle('Products')/items?$select=Approver/Title&$filter=Title eq '" +product+ "'&$expand=Approver",
        type: "get",
        dataType: 'json',
        headers: {
            "Accept": "application/json;odata=verbose",
            "Content-Type": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "IF-MATCH": "*",
            "X-HTTP-Method": null
        },
        success: function (data) {
            $("#txtapprover").text(data.d.results[0]["Approver"].Title);
        },
        error: function (data) {
            alert(data.responseJSON.error);
        }
    });
}