-1

To preface, I am 100% sure this question has been asked before, but I have no idea how to word it properly to get the search results I need.

The objective is simple. I want a user to be able to input a location on my web page, that will automatically add a location 2 input underneath once you start typing into the first location input.

location: *type here*

\/\/\/\/\/\/\/\/

location: example...

location 2: *type here*

I want the input locations to keep appearing until whatever arbitrary set limit I encode.

Our web app is using HTML, CSS, Javascript, and Perl. So I know there's a few methods to attach this, but I'd like to know the standard/accepted web dev approached

Thanks!

Edit: I suppose I should add I wanted to do this with a html table in a form div.

  • Ah, [this question](https://stackoverflow.com/questions/5656392/how-to-create-input-type-text-dynamically) combined with (eg) an [onchange event](https://www.w3schools.com/jsref/event_onchange.asp) should get you started. – 0stone0 Mar 31 '22 at 15:24

1 Answers1

1

You can add javascript simply. I am using native javascript but you can use anyother js library. First you have to add onkeyup event so that when user start typing myFunction() will be envoked.

<input type="text" id="location" name="location" onkeyup="myFunction()">
<input type="hidden" id="location_2" name="location_2">

Then you have to create myFunction(). In myFunction() you have to visible the hidden input field

<script>
function myFunction() {
  document.getElementById("location_2").style.visibility = "visible";
}
</script>

You can also check the first location input is empty or not in the same way. If the first location input get empty you can also hide the second location.

raaahad
  • 132
  • 1
  • 8
  • 1
    Ahhh, so you would have each input hidden until evoked? So technically they'd already exist, and be hidden? I can't thank you enough for the help on this. As I told that other *kind* user, I really didn't know what to search to find the results I needed. –  Mar 31 '22 at 15:24
  • That 'kind user' provided you 2 links to get you started. – 0stone0 Mar 31 '22 at 15:28
  • 1
    You are just adding 2 locations so that this approach is easy. If you want to add many location then you can add input field dynamically with js. – raaahad Mar 31 '22 at 15:29
  • After you rudely jumped to conclusions with a condescending comment. That's not how you cultivate a community. –  Mar 31 '22 at 15:29