Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Llenar campos de codigo postal con ajax y javascript

Estas en el tema de Llenar campos de codigo postal con ajax y javascript en el foro de Javascript en Foros del Web. Hola a todos, __________________________________________________ ________________ NOTA IMPORTANTE: En forosdelweb, encontré algo parecido a lo que busco pero no me sirvió, no pude echar a andar ...
  #1 (permalink)  
Antiguo 08/08/2018, 11:43
 
Fecha de Ingreso: noviembre-2015
Mensajes: 52
Antigüedad: 3 años, 1 mes
Puntos: 2
Llenar campos de codigo postal con ajax y javascript

Hola a todos,
__________________________________________________ ________________
NOTA IMPORTANTE: En forosdelweb, encontré algo parecido a lo que busco pero no me sirvió, no pude echar a andar ese código y por eso abro esta pregunta.
Por otra parte, NO se trabajar con Ajax, es por ello que pido ayuda.
__________________________________________________ ________________
Quiero pedirles ayuda para crear una función en ajax y javascript para que al momento de llenar el código postal de un domicilio automáticamente arroje el estado, ciudad, municipio y la colonia (ésta última en un select-option).
Hice un código en PHP para ésta función y anda muy bien, el problema es que cada vez que se consulta el código postal se refresca la página completa y eso es muy incómodo para el usuario.

Dejo mi código para ver si alguien me puede ayudar:
HTML:
Código HTML:
Código Postal:    <td width="335"><input type="text" value="<?php echo $registro_cp->codigo_postal;?>" style="width: 50px;" placeholder="" id="codigo_postal" name="codigo_postal" minlength="5" maxlength="5" onkeypress="return justNumbers(event)" /></td>
			<td width="100"><button id="consultar" class="btn btn-primary" name="consultar" onclick="return validarCP();">...</button></td>
			Estado:    <td width="335"><input type="text" value="<?php echo $registro_cp->estado;?>" placeholder="" id="estado" name="estado" readonly="readonly"/></td>
			Municipio:    <td width="335"><input type="text" value="<?php echo $registro_cp->municipio;?>" placeholder="" id="municipio" name="municipio" readonly="readonly"/></td>
			Ciudad:    <td width="335"><input type="text" value="<?php echo $registro_cp->ciudad;?>" placeholder="" id="ciudad" name="ciudad" readonly="readonly"/></td>
			Colonia   :    <td width="335"><select name="colonia" id="colonia" style="width:200px;">
				<option value="<?php echo $registro_cp->colonia;?>"><?php echo $registro_cp->colonia;?></option>
				<?php 

				 	while ($fila=mysqli_fetch_row($sql_query)) {
				 		echo "<option value='".$fila['7']."'>".$fila['7']."</option>";
				 	}
				  ?>
			    </select> 
Este es el código PHP
Código PHP:
<?php 

require('conexion.php');

try{
if(isset(
$_POST['consultar'])){  

            
$cp=$_POST['codigo_postal'];  
            
$id=$_POST['id_vdi'];//nuevo

            
$sql_querymysqli_query($con"SELECT codigo_postal, estado, municipio, ciudad, area_metropolitana,
            brick_ims, brick_atv, colonia FROM sepomex WHERE codigo_postal='$cp'"
); 
            
//
            
if(mysqli_num_rows($sql_query)<= 0){
        echo 
"<script> alert('Código postal incorrecto');</script>";
        
           
        }
            
$consultacp mysqli_query($con"SELECT * FROM tabla1 where id_vdi='$id'");//nuevo
            

            
$registro_cp mysqli_fetch_object($sql_query);     
            
$registro mysqli_fetch_object($consultacp);//nuevo
            
        
    
}
}catch (
Exception $e) {
            
        }

 
?>
__________________
paco alonso
  #2 (permalink)  
Antiguo 29/08/2018, 12:26
 
Fecha de Ingreso: noviembre-2015
Mensajes: 52
Antigüedad: 3 años, 1 mes
Puntos: 2
Respuesta: Llenar campos de codigo postal con ajax y javascript

Ya lo resolví, a ver si le sirve a alguien:
Necesitamos un archivo llamado buscar_registro.php
Código 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



    
while($registro2 mysqli_fetch_array($registro)){
                
        echo
"
        código postal<input type='text' name='codigo_postal' 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' id='estado' readonly='readonly' value='".$registro2['estado']."'</input>
                        municipio<input type='text' name='municipio' id='municipio' readonly='readonly' value='"
.$registro2['municipio']."'</input>
                        ciudad<input type='text' name='ciudad' id='ciudad' readonly='readonly' value='"
.$registro2['ciudad']."'</input></br></br>
área metropolitana<input type='text' name='area_metropolitana' id='area_metropolitana' readonly='readonly' style='width:30px; margin-left:50px;' value='"
.$registro2['area_metropolitana']."'</input>
                        brick atv<input type='text' name='brick_atv' id='brick_atv' readonly='readonly' value='"
.$registro2['brick_atv']."'</input>
                        brick ims<input type='text' name='brick_ims' id='brick_ims' readonly='readonly' value='"
.$registro2['brick_ims']."'</input>
                        zona postal<input type='text' name='zona_postal' id='zona_postal' readonly='readonly' style='width:30px;' value='"
.$registro2['zona_postal']."'</input>";
    
        
                
                        echo
"colonia<select name='colonia' 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>";
                

Luego otro llamado myjava.js
Código:
$(function() {
    $('#bs-prod').on('keyup', function() {
        var dato = $('#bs-prod').val();
        var url = '../php/busca_registro.php';
        $.ajax({
            type: 'POST',
            url: url,
            data: 'dato=' + dato,
            success: function(datos) {
                $('#agrega-registros').html(datos);
            }
        });
        return false;
    });
});
Por último el index
Código PHP:
echo"calle<input name='calle' id='calle' value='".$fila['39']."'</input>
                        número exterior<input type='text' name='numero_exterior' id='numero_exterior' style='width:50px;' value='"
.$fila['40']."'</input>
                        número interior<input type='text' name='numero_interior' id='numero_interior' style='width:50px;' value='"
.$fila['41']."'</input>
                        referencia<input type='text' name='referencia' id='referencia' value='"
.$fila['42']."'</input></div></br>";

    echo
"<input type='text' placeholder='Buscar Código Postal' id='bs-prod'/>";                  
echo
"<div class='registros-uno' id='agrega-registros'>código postal<input type='text' name='codigo_postal' id='codigo_postal' minlength='5' maxlength='5' onkeypress='return justNumbers(event)' readonly='readonly' style='width:50px;' value='".$fila['codigo_postal']."'</input>
                        colonia<select name='colonia' id='colonia'>
                        <option value='"
.$fila['colonia']."'>".$fila['colonia']."</option>
                        </select>
                        estado<input type='text' name='estado' id='estado' readonly='readonly' value='"
.$fila['estado']."'</input>
                        municipio<input type='text' name='municipio' id='municipio' readonly='readonly' value='"
.$fila['municipio']."'</input>
                        ciudad<input type='text' name='ciudad' id='ciudad' readonly='readonly' value='"
.$fila['ciudad']."'</input></br></br>

área metropolitana<input type='text' name='area_metropolitana' id='area_metropolitana' readonly='readonly' style='width:30px; margin-left:50px;' value='"
.$fila['area_metropolitana']."'</input>
                        brick atv<input type='text' name='brick_atv' id='brick_atv' readonly='readonly' value='"
.$fila['brick_atv']."'</input>
                        brick ims<input type='text' name='brick_ims' id='brick_ims' readonly='readonly' value='"
.$fila['brick_ims']."'</input>
                        zona postal<input type='text' name='zona_postal' id='zona_postal' readonly='readonly' style='width:30px;' value='"
.$fila['zona_postal']."'</input></div></br></br></br></br>"
Incluyen el myjava.js con script y listo, hace la búsqueda incluso con el combo de las colonias por cada código postal.

Saludos
__________________
paco alonso



La zona horaria es GMT -6. Ahora son las 03:36.