Sharepoint list: Unable to populate field using variable value

Question

I am trying to populate the list column with calculated value in code below.

While the alert & messages show the value being assigned to variable correctly but somehow field is not getting populated with that value.

<script type="text/javascript">
    var clientContext = null;
    var web = null;
    var count = null;
    var list ;
    ExecuteOrDelayUntilScriptLoaded(Initialize, "sp.js");
    function Initialize()
    {
        clientContext = new SP.ClientContext.get_current();
        web = clientContext.get_web();
        list = web.get_lists().getByTitle("Data Setup");
        clientContext.load(list);
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onListItemsLoadSuccess), 
        Function.createDelegate(this, this.onQueryFailed));
    }
    function onListItemsLoadSuccess(sender, args) {
       var count = list.get_itemCount();
        alert("Total item count in the list: " + count);
               var AutoIncremental = "MAA-SR-" + count;
               $("input[title^='*Request ID*']").val(AutoIncremental);
               $("input[title^='*Request ID*']").attr('disabled', 'disabled');

    }

    function onQueryFailed(sender, args) {
        alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
    }
</script>

Answer 1

Solution using JQuery:

Have you referenced jQuery file in your code (I suspect you haven't)? If Yes then below code should work for you:

$("input[title^='Request ID']").val(AutoIncremental);

If you have not referenced JQuery file then you can refer it like below in your HTML and then use same code as above:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Recommended is to download jQuery file, upload it in your SharePoint site and then refer it's URL in src attribute by replacing the web CDN link.

Solution using JavaScript:

If you don't want to use JQuery then you can achieve the same using plain JavaScript:

document.querySelector("input[title^='Request ID']").value = AutoIncremental;
document.querySelector("input[title^='Request ID']").disabled = "disabled";

Answer 2

Try to remove the asterisk characters around the Request ID as the below. It should work for you.

$("input[title^='Request ID']").val(AutoIncremental);
$("input[title^='Request ID']").attr('disabled', 'disabled');