How to pass individual info to specific input field from select option list view using jquery

Question

    firebase.auth().onAuthStateChanged(function(user) {
    console.log(user);
     if (user) {
        var user_id = user.uid;
          firebase.database().ref('Clients/'+user_id)
       .once('value').then(function(snapshot){
            snapshot.forEach(function(childSnapshot) {
              var client_name = childSnapshot.child("client_name").val();
              var client_phone = childSnapshot.child("client_phone").val();
            var client_address = childSnapshot.child("client_address").val();
    var total = client_name + "<br>" + client_phone + "<br>" + client_address;
              console.log(total);
              $('.client_option').append('<option>' + total +'</option');


                      
              });
          })
    }
    else{
        window.location.href="{% url 'login' %}";
    }


  });
    

In this code, I already got individual client information. I have 3 input fields. As these values are displayed as options, I want that, when the user selects a set of options(client_name, phone, address), the individual info passes to specific fields. Here are my input fields.

    <input type="text" class="form-control" id="clientName" list="client" 
    autocomplete="off">
    <datalist class="form-control client_option" id="client" hidden>
    </datalist> 
    <input type="tel" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" id="phone" 
    class="form-control" autocomplete="off">
    <input type="text" class="form-control" id="address" autocomplete="off"> 

Thanks in advance.

Answer 1

Try this out to make this example I have replaced the childSnapshopt.child but it should work as same.

The big point is you can use text() to insert the text into an element.

I also suggest that you use template strings to build your string. Then there is no need of the string concat.

 function disp(){ var client_name = $('#client_name').val(); var client_phone = $('#client_phone').val(); var client_address = $('#client_address').val(); var total = `${client_name} \n${client_phone} \n${client_address}` console.log(total); $('.client_option').text('<option>' + total +'</option'); }

 <input id="client_name"> </input> <input id="client_phone"> </input> <input id="client_address"> </input> <button type="submit" onclick="disp()"></button> <div class=".client_option"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

 function disp(){ var client_name = $('#client_name').val(); var client_phone = $('#client_phone').val(); var client_address = $('#client_address').val(); var total = client_name + "-" + client_phone + "-" + client_address; $('.client_option').append('<option>' + total +'</option'); } $(document).on("change", ".client_option", function(){ var valArr = $(".client_option option:selected").text().split("-"); $("#clientName").val(valArr[0]); $("#phone").val(valArr[1]); $("#address").val(valArr[2]); $("#client").append("<option>" + $(".client_option option:selected").text() + "</option>"); });

 <input id="client_name"> </input> <input id="client_phone"> </input> <input id="client_address"> </input> <button type="submit" onclick="disp()">Submit</button> <select class="client_option"><option>Please Select</option></select> <input type="text" class="form-control" id="clientName" list="client" autocomplete="off"> <datalist class="form-control client_option" id="client" hidden> </datalist> <input type="tel" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" id="phone" class="form-control" autocomplete="off"> <input type="text" class="form-control" id="address" autocomplete="off"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>