php Question posted in
Official manual can be found here.

Php – Populate Input field value based on selected dropdown (added dynamically)

I’ve got a form that allows adding and removing dropdown lists dynamically using JavaScript. I want to populate an input with name "nombre" according to dropdown selection. I can fetch the name for the select ID from an MySQL table, but I don’t how to populate input with the name.

This is the JavaScript code for adding the dropdown list dynamically (idmedico) and the input to populate (nombre):

var fila='<tr class="filas" id="fila'+cont+'">'+
  '<td><button type="button" class="btn btn-danger" onclick="eliminarDetalle('+cont+')">X</button></td>'+
  '<td><select  name="idmedico[]" class="form-control idmedico" onchange="myFunction(this.value)" required><option value="" >Seleccione Cuenta</option><?php echo seleccionar_medico($connect); ?></select></td>'+
  '<td><input type="text" id="nombre[]" name="nombre[]" value=""></td>'+
  '</tr>';
cont++;
detalles++;
$('#detalles').append(fila);

I can fetch the name (nombre) according the ID selected on the dropdown list. For onchange, I have the following JavaScript function:

function myFunction(idmedico) {
  $.ajax({
    url: "traer_nombre_medico.php",
    type: "POST",
    dataType: "json",
    data: { idmedico: idmedico },
    success: function (data) {
      alert(data.nombre);
    },
    error: function (errorThrown) {
      alert(errorThrown);
    },
  });
}

But I don’t know how to fill the input with name (id="nombre[]") fetched:

'<td><input type="text" id="nombre[]" name="nombre[]" value=""></td>'+

Please, any ideas?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks for your answer bhishek Kumar.

    I tried your code, but when I make a selection in the dropdown list (class .medico) I never go to JavaScript function (medico).

    This is my code with the dropdown list and the input:

    var fila='<tr class="filas" id="fila'+cont+'">'+
        '<td><button type="button" class="btn btn-danger" onclick="eliminarDetalle('+cont+')">X</button></td>'+
        '<td><input type="hidden" name="idarticulo[]" value=""></td>'+
        '<td><select name="idmedico[]" class="medico form-control" data-id="'+cont+'" required><option value="" >Seleccione Cuenta</option><?php echo seleccionar_medico($connect); ?></select></td>'+
        '<td><input type="text" id="nombre_'+cont+'" name="nombre[]" value=""></td>'+
        '</tr>';
        cont++;
        detalles++;
        $('#detalles').append(fila);

    This my JavaScript function:

    $(".medico").change(function(){
     var idmedico= $(this).val();
     var target = $(this).attr('data-id');
     
     $.ajax({
        url: "traer_nombre_medico.php",
        type: "POST",
        dataType: "json",
        data: { idmedico: idmedico },
        success: function (data) {
           $('#nombre_'+target).val(data.nombre);
          //alert(data.nombre);
        },
        error: function (errorThrown) {
          alert(errorThrown);
        },
    });  
});

    For trying I put just an alert on my JavaScript function but I reach that function:

    $(".medico").change(function(){
     alert ("Hi");  
});

    For Trying If I use onchange in the dropdown list I can go to JavaScript function and there in the JavaScript function put the name fetched manually in input it works:

    var fila='<tr class="filas" id="fila'+cont+'">'+
        '<td><button type="button" class="btn btn-danger" onclick="eliminarDetalle('+cont+')">X</button></td>'+
        '<td><input type="hidden" name="idarticulo[]" value=""></td>'+
        '<td><select name="idmedico[]" class="medico form-control" data-id="'+cont+'" onchange="myFunction(this.value)" required><option value="" >Seleccione Cuenta</option><?php echo seleccionar_medico($connect); ?></select></td>'+
        '<td><input type="text" id="nombre_'+cont+'" name="nombre[]" value=""></td>'+
        '</tr>';
        cont++;
        detalles++;
        $('#detalles').append(fila);

    JavaScript Function myFunction:

    function myFunction(idmedico){
        $.ajax({
            url: 'traer_nombre_medico.php', 
            type: 'POST',
            dataType: 'json',
            data:{idmedico:idmedico},    
            success: function(data)
            {   
                alert(data.nombre);
                //It works, Put the name fetched in input nombre[0] 
                var target=0;
                 $('#nombre_'+target).val(data.nombre);
                
            },
            error: function(errorThrown)
            {
                alert(errorThrown);
            }
            });
        }

    I don't know how to pass to javascript function the counter variable cont and idmedico (at same time) for populating id="nombre_'+cont+'"


  2. 0

    try this code this will work . use Jquery change event on .medico class which will work as same your onchange event also each nombre input is given unique id based on your cont variable which can be used in data-id attribute for further usage. check below code.

          var fila='<tr class="filas" id="fila'+cont+'">'+
     '<td><button type="button" class="btn btn-danger" onclick="eliminarDetalle('+cont+')">X</button></td>'+
  '<td><select  name="idmedico[]" class="medico form-control "  data-id="'+cont+'" required><option value="" >
       Seleccione Cuenta</option><?php echo seleccionar_medico($connect); ?></select></td>'+
  '<td><input type="text" id="nombre_'+cont+'" name="nombre[]" value=""></td>'+
  '</tr>';
cont++;
detalles++;
$('#detalles').append(fila);

    javascript function

    $(".medico").change(function(){
     var idmedico= $(this).val();
     var target = $(this).attr('data-id');
     
     $.ajax({
        url: "traer_nombre_medico.php",
        type: "POST",
        dataType: "json",
        data: { idmedico: idmedico },
        success: function (data) {
           $('#nombre_'+target).val(data.nombre);
          //alert(data.nombre);
        },
        error: function (errorThrown) {
          alert(errorThrown);
        },
    });  
});

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search