CODEWITHSUNDEEP
javascripthtmlajax
user9630194
user9630194

Reputation: 398

Html text box only refreshes on click when changing its value from script?

I want to implement an autofill function and I got pretty far but now I'm stuck. I want to automatically fill the textbox if there are more than 4 characters with the data recieved from backend but the code only does this when I click away. Thank you for your help!

The html:

<input asp-for="Name" class="form-control" id="myText" onchange="autoFill()" />

And the ajax:

function autoFill() {
        if (document.getElementById("myText").value.length > 4) {
            var data2send = JSON.stringify(document.getElementById("myText").value);
            $.ajax({
                url: 'https://localhost:44348/api/values/CheckDatabase',
                type: 'POST',
                data: data2send,
                contentType: 'application/json',
                dataType: 'json',
                success: function (data) {
                    document.getElementById("myText").value = data;
                },
            });
        }

    }

Upvotes: 0

Views: 23

Answers (2)

P215W
P215W

Reputation: 11

you could try to change the event to an oninput event, like so:

<input asp-for="Name" class="form-control" id="myText" oninput="autoFill()" />

Upvotes: 0

pynode
pynode

Reputation: 434

You will need to use onkeyup event instead of onchange. Then it will work.

Upvotes: 1

Related Questions