How to autofill textboxes with attributes of the selected object from a dropdown list

Question

In my html page, I want to autofill textboxes with informations(common Name, location,..) of the selected object (shop) from the dropdown list without refreshing the page.

this is the dropdown list:

<select id="shops" class="form-control"> 
    <option  value="">Choisir</option>
    <option th:each="shop : ${shops}" th:value="${shop.uuid}" th:utext="${shop.uuid}" onClick = "autofillValues()"/>                                               
</select> 

and this is the script:

function autofillValues()){
  document.getElementById('commonName').value = $('#shop').find(":selected").val().siret;
}

I tried several codes for 2 weeks and I can't find the solution yet.

Answer 1

As mentioned by Vincent, the data would need to be held somewhere on the frontend. This could simply be an array within your code or be pulled from a backend endpoint via an API request.

If you, for example, had an array like this:

 [ 
   { 
      uuid:"49c03f73-c0c5-4bc6-bde4-4a01f66f86c1",
      commonName:'Shop 1',
      location:'New York, NY, US'
   },
   { 
      uuid:"1cb2eeb7-6618-4a7a-8334-72cb0c90bf2a",
      commonName:'Shop 2',
      location:'Toronto, ON, CA'
   }
]

Inside your autofillValues function, you can filter the array (lets assume it's called shopList) by id and populate your elements.

<select id="shops" class="form-control" onchange="autofillValues(value)"> 
    <option  value="">Choisir</option>
    <option th:each="shop : ${shops}" th:value="${shop.uuid}" th:utext="${shop.uuid}" />                                               
</select> 

function autofillValues(id){
    let shop = shopList.find(f => f.uuid == id);

    if(shop !== null) {
      document.getElementById('commonName').value = shop.commonName;
    }     
}

I replaced the onclick attr on the options with an onchange attr on the select for simplicity

This is a very basic implementation, but here's it working on JSFiddle

Answer 2

You need to store he values somewhere in the front end in order to not to a contact the server. Lets assume that you store them in an array : shops

The when you call the autofillValues function when you select a option from the drop down.

in this function, you wind the appropriate value from the array and then populate the items.

If you are only concerned about the refresh, the you can do an ajax call and return the item that way