AJAX not updating input field

[MarkE]

I have a template with a field 'selector' that stores a selector string built from InputfieldSelect and InputfieldSelector options. The selector field is updated by javascript. When I save the admin page, the selector field in the DB is updated and the page loads with the correct Inputfield options. I am trying to avoid having to manually save the page when the InputfieldSelect value changes, so I have a little js snippet that runs on 'change' to update the value of the selector field. I can see from the console log that see that the data is being submitted and that the post is successful, but the returned data does not have the changed value. What am I doing wrong? The js is below, followed by the html for the InputfieldSelect that triggers it.

$(document).on('change', '[data-action="form-update"]', function () {
    console.log("Executing snippet!");
    var $form = $(this).closest('form');

    var target = $(this).data('update-target');
    console.log("Target is " + target);

    var method = $form.attr('method');
    var action = $form.attr('action');
    var data = $form.serialize();
    console.log("Submitted data: " + data);
    console.log("Method: " + method);

    if (!method)
        method = 'get';
    if (!action)
        action = window.location.href;

    // I usually add a loading overlay on the update target here, that might look something like this:
    $(target).find('.loading').css({
        display: 'block',
        opacity: 0
    }).animate({
        opacity: 1
    }, 5000);
    // then send your request
    $.ajax(action, {
        method: method,
        data: data,
        // you can also add an error handler here if required, in case the server returns an error on the request
        success: function (data) {
            // then just take the target, and replace it with the target div from the returned data
            console.log("Returned data: " + data);
            // modified below to use .attr('value', ...) rather than .html
            console.log("Updating value with: " + $(data).find(target).attr('value'));
            $(target).attr('value', ($(data).find(target).attr('value')));
        }
    })
});

<select id="Inputfield_select_template" class="uk-select uk-form-small" name="select_template" data-action="form-update" data-update-target="#Inputfield_selector"><option value="">&nbsp;</option><option value="Booking">Booking</option><option value="Mandate">Mandate</option><option selected="selected" value="Member">Member</option><option value="Membership">Membership</option><option value="MemberShop">MemberShop</option><option value="NewsItem">NewsItem</option><option value="Payment">Payment</option><option value="Profile">Profile</option><option value="Subscription">Subscription</option><option value="user">user</option></select>

Console extracts:

Target is #Inputfield_selector

Submitted data: title=test-users&summary=&select_template=Booking&select_filter__field%5B%5D=&select_filter=&selector=template%3DBooking&edit_mode=edit&childTemplate=&templateId%5Bnew_0%5D=130&idsToDelete=&individualChildTitles%5Bnew_0%5D=&templateId%5Bnew_0%5D=130&_pw_page_name=test-users&template=141&id=8707&TOKEN1616224121X1582934644=BMPaNoSmbHI%2FbXmbxBDyQGtcOHbbYqPK&_after_submit_action=

Method: post

Updating value with: template=Member

I haven't included the full returned data as the last log item shows the value extracted from it. As you can see, template=Booking is submitted, but template=Member is returned.

[MarkE]

Aha - mostly solved this now - I am using method: in the ajax, but jquery is version 1.8.3, so I should use type:

EDIT: Spoke too soon. Needed to modify the success: function(data) as follows

        success: function (data) {
            $.ajax(window.location.href, {
                type: 'GET', cache: false, success: function (data) { // then just take the target, and replace it with the target div from the returned data
                    console.log("Returned data: " + data);
                    // modified below to use .attr('value', ...) rather than .html
                    console.log("Updating value with: " + $(data).find(target).attr('value'));
                    $(target).attr('value', ($(data).find(target).attr('value')));
                }
            });

but the returned data has not been updated by the posted data.

EDIT2: Finally solved. I'll post the JS when I've tidied it up, in case it is useful to anyone else.

[MarkE]

I have posted the js here