[SOLUCIONADO] Petición de ajax para un array de campos dinámicos en php

[madison_sg]

Hola,

Tengo un arreglo de campos dinámicos en php, cuando recupero la información de la base de datos los registros tienen nombre y apellido, pero cada registro puede tener más de un domicilio. La función que implementé sirve para que al ingresar un código postal haga una petición de ajax y traiga toda la información de estado, municipio, ciudad y colonia y funciona bien en el primer domicilio que se encuentra del arreglo, pero al intentar introducir un código postal en los campos dinámicos en el domicilio 2 o 3, simplemente no hace nada. Mi pregunta es ¿Cómo puedo hacer para que funcione la petición en cada campo de código postal que se crea dinamicamente?

Este es mi código php ligado al ajax:

Código PHP:

  <?php
include('conexion.php');
 
$dato = $_POST['dato'];
 
//EJECUTAMOS LA CONSULTA DE BUSQUEDA
 
$registro = mysqli_query($con, "SELECT codigo_postal, estado, municipio, ciudad, area_metropolitana, brick_atv, brick_ims, zona_postal FROM sepomex WHERE codigo_postal = '$dato' LIMIT 1");
 
 
//CREAMOS NUESTRA VISTA Y LA DEVOLVEMOS AL AJAX
$i = 1;
            foreach ($registro as $registro2) {
 
   
                
        echo"código postal<input type='text' name='codigo_postal[$i]' id='codigo_postal' minlength='5' maxlength='5' onkeypress='return justNumbers(event)' readonly='readonly' style='width:50px;' value='".$registro2['codigo_postal']."'</input>";
        
                        echo"estado<input type='text' name='estado[$i]' id='estado' readonly='readonly' value='".$registro2['estado']."'</input>
                        municipio<input type='text' name='municipio[$i]' id='municipio' readonly='readonly' value='".$registro2['municipio']."'</input>
                        ciudad<input type='text' name='ciudad[$i]' id='ciudad' readonly='readonly' value='".$registro2['ciudad']."'</input></br></br>
área metropolitana<input type='text' name='area_metropolitana[$i]' id='area_metropolitana' readonly='readonly' style='width:30px; margin-left:50px;' value='".$registro2['area_metropolitana']."'</input>
                        brick atv<input type='text' name='brick_atv[$i]' id='brick_atv' readonly='readonly' value='".$registro2['brick_atv']."'</input>
                        brick ims<input type='text' name='brick_ims[$i]' id='brick_ims' readonly='readonly' value='".$registro2['brick_ims']."'</input>
                        zona postal<input type='text' name='zona_postal[$i]' id='zona_postal' readonly='readonly' style='width:30px;' value='".$registro2['zona_postal']."'</input>";
    
        
                
                        echo"colonia<select name='colonia[$i]' id='colonia'>";
                        $reg = mysqli_query($con, "SELECT colonia FROM sepomex WHERE codigo_postal='$dato'");
                        while ($registro2=mysqli_fetch_array($reg)) {
                        echo"<option value='".$registro2['colonia']."'>".$registro2['colonia']."</option>";
                        }
                        echo"</select>";
                        $i++;
                
}
 
?>   

Este es mi código de ajax:

Código PHP:

  $(function() {
    $('#bs-prod').on('keyup', function() {
        var dato = $('#bs-prod').serialize();
        var url = '../php/busca_registro.php';
        $.ajax({
            dataType: 'json',
            type: 'POST',
            url: url,
            data: 'dato=' + dato,
            success: function(datos) {
                $('#agrega-registros').html(datos);
            }
        });
        return false;
    });
}); 
   

Este es el código del index:

Código PHP:

   echo"<input type='text' placeholder='Buscar Código Postal' id='bs-prod' name='bs-prod[$i]'/>";  
 
echo"<div class='registros-uno' id='agrega-registros' name='agrega-registros[$i]'>código postal<input type='text' name='codigo_postal[$i]' id='codigo_postal' minlength='5' maxlength='5' onkeypress='return justNumbers(event)' readonly='readonly' style='width:50px;' value='".$fila['codigo_postal']."'</input>
                        
                        estado<input type='text' name='estado[$i]' id='estado' readonly='readonly' value='".$fila['estado']."'</input>
                        municipio<input type='text' name='municipio[$i]' id='municipio' readonly='readonly' value='".$fila['municipio']."'</input>
                        ciudad<input type='text' name='ciudad[$i]' id='ciudad' readonly='readonly' value='".$fila['ciudad']."'</input></br></br>
 
área metropolitana<input type='text' name='area_metropolitana[$i]' id='area_metropolitana' readonly='readonly' style='width:30px; margin-left:50px;' value='".$fila['area_metropolitana']."'</input>
                        brick atv<input type='text' name='brick_atv[$i]' id='brick_atv' readonly='readonly' value='".$fila['brick_atv']."'</input>
                        brick ims<input type='text' name='brick_ims[$i]' id='brick_ims' readonly='readonly' value='".$fila['brick_ims']."'</input>
                        zona postal<input type='text' name='zona_postal[$i]' id='zona_postal' readonly='readonly' style='width:30px;' value='".$fila['zona_postal']."'</input>
                        colonia<select name='colonia[$i]' id='colonia'>
                        <option value='".$fila['colonia']."'>".$fila['colonia']."</option>
                        </select>
                        </div> 
   

Esto lo tengo como arreglo y funciona muy bien en el php, pero al tratar de introducir un código postal en el input que desencadena el evento pues ... solo lo hace en el domicilio 1 porque al introducir un código postal en el campo del domicilio 2 o 3 simplemente los ignora.

Si alguien me puede ayudar porque no sé casi nada de ajax y no puedo solucionarlo.

Gracias por su ayuda.

[madison_sg]

La solución no fue tan sencilla pero tampoco tan complicada si se tienen conocimientos jeje, pues hí les va:

Código PHP:

  function cp(event) {
    var idName = event.target.id;
    var datoName = "#" + event.target.id;
    console.log(datoName);
    var dato = $(datoName).val();
    var valueI = idName.substr(-1);
    var url = '../php/busca_registro.php';
    $.ajax({
        type: 'POST',
        url: url,
        data: 'dato=' + dato,
        success: function(datos) {
            var nameDiv = "#agrega-registros" + valueI;
            console.log(nameDiv)
            $(nameDiv).html(datos);
        }
    });
} 
   

Lo que hago es recuperar el id de cada elemento que se crea del arreglo de php, depués lo igualo con los datos que vienen de la consulta con la variable dato que se declaró en buscar_registro.php y finalmente recibo el ajax en un:

Código PHP:

  <div class='registros-uno' id='agrega-registros$i' name='agrega-registros$i' > 
   

Funciona perfecto.

Se los dejo por si a alguien le sirve.