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

user_14559167 0
Viewed 68
    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.

jquery javascript
2 Answers

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>

user_147470390 

 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>

user_56465910
Related