CODEWITHSUNDEEP
jquery
Bruno
Bruno

Reputation: 1055

Fill input automatically when selecting a value in select

I have the following code that creates a select and an input, and returns the data to a select with a query to the database.

const campos_max = 10;

let x = 0;
$('#add_field').click (function(e) {
e.preventDefault(); 
if (x < campos_max) {
    $('#listas').append(`<select class="form-control1 Reff${x}" name="Ref[]"><option></option></select><input type="text" class="form-control1 Desigg${x}" name="Designacao[]" id="Desigg" value="" required>`}

$.ajax({
    url: "artigo1.php",
    dataType: "JSON",
    success: function(result){
    
    var html = $(`.Reff${x}`);

    result.forEach(element => {
     html.append(`<option value="`+element+`">`+element+`</option>`);
    });

    x++;

    }
});
});

Now I intend that when selecting the value in the select that it automatically fills the input with the value also returned from the query to the database.

I'm trying this way:

$(`.Reff${x}`).change(function(){ 
        var Refart = $(this).val();

        $.ajax({
            type:"POST",
            url:"artigo.php",
            dataType:"Json",
            data:{Refart:Refart},
            success:function(callback){
                
             var data_array = callback;          
             artigo1 = data_array

              $(`.Desigg${x}`).html(artigo1);
              document.getElementById('Desigg').value = artigo1;

            }
     });    
    });

When I select the first select, it automatically fills in the input. The problem is when I add the second select the input, when selecting the value of the second select, it changes the value of the first input and does not fill the input according to the select.

Upvotes: 1

Views: 263

Answers (1)

Swati
Swati

Reputation: 28522

As your select-box is generated dynamically first bind it with static element i.e : any div,document,body..etc .Then you can give some other div to your select-box and inputs so whenever select value is change you just need to use closest and find to add the value return from ajax to required inputs.

Demo Code :

const campos_max = 10;

let x = 0;
$('#add_field').click(function(e) {
  e.preventDefault();
  if (x < campos_max) {
    //added outer div here
    $('#listas').append(`<div><select class="form-control1 Reff${x}" name="Ref[]"><option></option></select><input type="text" class="form-control1 Desigg${x}" name="Designacao[]" id="Desigg" value="" required></div>`)
  }

  /*$.ajax({
    url: "artigo1.php",
    dataType: "JSON",
    success: function(result) {*/

  var html = $(`.Reff${x}`);

  /* result.forEach(element => {*/
  //demo datas
  html.append(`<option value="A">A</option><option value="B">B</option><option value="C">C</option>`);
  /* });*/

  x++;

  /* }
        });*/
});
//for handling dynamic slectsboxs
$(document).on("change", "select[class*=Reff]", function() {
  var Refart = $(this).val();
  var selector = $(this) //get cuurent reference 
  console.log(Refart)
  /*$.ajax({
    type: "POST",
    url: "artigo.php",
    dataType: "Json",
    data: {
      Refart: Refart
    },
    success: function(callback) {

  var data_array = callback;
  artigo1 = data_array*/

  artigo1 = "soemthing..."
  selector.closest("div").find("input").val(artigo1) //get closest div find input add value there..

  /* }
      });*/
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="listas"></div>
<button id="add_field">Add more</button>

Upvotes: 1

Related Questions