L
L
lagudal2021-06-30 12:45:52
JavaScript
lagudal, 2021-06-30 12:45:52

How to pass a variable to the input as typed manually?

The problem is this.
There is a form to which the address autocomplete script is attached, in particular the zip code, city and street fields - if it matters, this is melissa, here's a demo .
Adapted to your requirements.
Three variables city, postcode and street - when you click on the selected element, the value is transferred to the input - an example.

document.querySelector("[name='city']").value = city;
document.querySelector("[name='postcode']").value = postcode;

The value is passed, everything is substituted, everything is correct. That's just the value in the inputs is not set. Those. set exactly what is typed on the keyboard. For example, if I start typing a 5-digit index, and after the first two three or four I find the one I need and substitute it with the city, then the value of the inputs will be:
index - those numbers that the
city typed manually - an empty value and the script will return an error that this is required field

60dc3b04eabc4398162900.png
Street - those letters that you typed manually.
If several characters were typed manually in all fields, then they are transferred to the next step.
60dc3bcf98a08129250324.png
In this example, a is the first letter of the street typed, the index and the city are also not fully typed.
Those. it is necessary to transfer the value in such a way that there is an emulation of a manual set, or something else.
So far, only a click on the input comes to mind and after that, enter, in principle it will work, but after enter, the script loads the list of proposed options again.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
P
profesor08, 2021-06-30
@lagudal

[name='city']There are no and elements on the page [name='postcode']. But on those that are, everything works

document.querySelector(".contactForm input").value = "123123123"

If you need to call the handler code, then you need to create a suitable event
input.dispatchEvent(new Event("input"))

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question