0

Me podrian ayudar con dar un valor a 4 inputs dependiendo del valor que tome de un combobox que carga la columna de una tabla donde estan todos mis datos?

Por ejemplo si en mi pagina uso el combobox y selecciono el valor "CAMPO"(como viene en la imagen), que en otros inputs tome su valor correspondiente a la misma fila.

Mi codigo y mi tabla son las siguientes:

Tengo una base de datos con una tabla llamada "sitios" en mysql: introducir la descripción de la imagen aquí

Tengo un formulario donde tengo un select el cual ya tengo echa la consulta a la tabla "sitios" para que muestre solo los datos de la columna "Sitio", lo que busco es que en otros inputs se coloque el valor ("Referencia", "Domicilio", "Telefono", "Ciudad") respectivo al "Sitio" seleccionado en el select.

Aquí esta el código:

<!DOCTYPE html>
<!--
 *
 * @author Zarate
-->
<html>
    <head>
        <?php
        $user = "root";
        $pass = "";
        $serv = "localhost";
        $dataB = "cdv1";
        
        $mysqli = new mysqli($serv, $user, $pass, $dataB);
        mysqli_set_charset($mysqli, "utf8");

        $sqlB="select titulo from completar order by titulo";
        $resB= mysqli_query($mysqli, $sqlB);
        
        $arreglo_php=array();
        
        if(mysqli_num_rows($resB)==0)
            array_push($arreglo_php, "No hay datos");
        else {
            while($palabras = mysqli_fetch_array($resB)) {
                array_push($arreglo_php, $palabras["titulo"]);
            }
        }
        ?>
        
        <meta charset="UTF-8">
        <title>Solicita tu Cuenta</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.12.1/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.12.1/jquery-ui.js"></script>
<!--        <link rel="stylesheet" href="CSS/solicitud.css">-->
<!--        <script src="JS/soloLetras.js"></script>-->
        <script src="js/soloLetrasv2.js"></script>
        <script src="js/keyCURP.js"></script>
        <script src="js/soloNumeros.js"></script>
        <script src="js/letraCapital.js"></script>
        
        <script>
            $(function(){
                var vec_pal = new Array();
                <?php
                for($p = 0;$p < count($arreglo_php); $p++){ //usamos count para saber cuantos elementos hay ?>
                        vec_pal.push('<?php echo $arreglo_php[$p]; ?>');
                <?php } ?>
                    $("#titulo").autocomplete({
                        source: vec_pal
                    })
            })
        </script>
        
    </head>
    
    <body>
        <form name="formSoli" action="Confirmacion.php" class="formSolicitud" method="POST">
            <button type="button" onclick="location='/CuentasDominio/login/index.php'" class="btnAdmin">
                <span class="glyphicon glyphicon-cog"></span>
            </button>
            <h1 class="formTitulo">Solicita tu Cuenta</h1>
            <label for="" class="formLabel">Nombre</label>
            <input type="text" name="nom" class="formInput" onselectstart="return false" autocomplete="off" title="Desactivar Bloq Mayus" maxlength="40" onpaste="return false" oncut="return false" oncopy="return false" onkeypress="return letraCapital(event,this);">

            
            <label for="" class="formLabel">Apellido Paterno</label>
            <input type="text" name="apeP" class="formInput" onselectstart="return false" autocomplete="off" title="Desactivar Bloq Mayus" maxlength="40" onpaste="return false" oncut="return false" oncopy="return false" onkeypress="return letraCapital(event,this);">
            <label for="" class="formLabel">Apellido Materno</label>
            <input type="text" name="apeM" class="formInput" onselectstart="return false" autocomplete="off" title="Desactivar Bloq Mayus" maxlength="40" onpaste="return false" oncut="return false" oncopy="return false" onkeypress="return letraCapital(event,this);">
            
            <label for="" class="formLabel">Titulo</label>
            <input type="text" id="titulo" name="titulo" class="formInput" autocomplete="off" placeholder="Ejemplo: Ingeniero en ..." title="Campo Opcional" maxlength="80" onpaste="return false" oncut="return false" oncopy="return false" required onKeypress="return soloLetrasv2(event);">  
            
            <label for="" class="formLabel">Puesto</label>
            <input type="text" name="puesto" class="formInput" autocomplete="off" maxlength="70" onpaste="return false" oncut="return false" oncopy="return false">        
            <label for="" class="formLabel">Departamento</label>
            <input type="text" name="depa" class="formInput" autocomplete="off" maxlength="70" onpaste="return false" oncut="return false" oncopy="return false">
            <!--            sitio-->
            <label for="" class="formLabel">Sitio</label>
            <select name="sitio" id="sitio" class="formSelect" title="Seleccione el sitio correspondiente" onmousedown="if(this.options.length>8){this.size=6;}" onchange='this.size=0;' onblur="this.size=0;">                
                <?php
                
                $query = $mysqli -> query ("SELECT * FROM Sitios");
                while ($valores = mysqli_fetch_array($query)) {
                    echo '<option>'.$valores[Sitio].'</option>';
                //mejor lo quite del option (value="'.$valores[Referencia].'")
                }
                ?>
            </select>
            
            
            <!--            input hidden-->
            <input type="hidden" name="ref" id="ref" value="">
            
            <input type="hidden" name="dom" id="dom" value="">
            <input type="hidden" name="tel" id="tel" value="">
            <input type="hidden" name="ciudad" id="ciudad" value="">
            
            <input type="hidden" name="email" value="">
            
            <label for="" class="formLabel">CURP</label>
            <input type="text" name="curp" class="formInput" onselectstart="return false" autocomplete="off" size="18" maxlength="18" onpaste="return false" oncut="return false" oncopy="return false" required onKeypress="return keyCURP(event);" onKeyUp="this.value = this.value.toUpperCase();">   
            <label for="" class="formLabel">N°Seguro Social</label>
            <input type="text" name="numSS" class="formInput" autocomplete="off" maxlength="12" onpaste="return false" oncut="return false" oncopy="return false" required onKeypress="return soloNumeros(event);">
            <label for="" class="formLabel">Matricula</label>
            <input type="text" name="matri" class="formInput" autocomplete="off" maxlength="9" onpaste="return false" oncut="return false" oncopy="return false" required onKeypress="return soloNumeros(event);">
            
            <input type="submit" src="Confirmacion.php" id="btnSoli" class="btn btn-success btn-lg btn-block" value="Enviar Datos">
        </form>
        <script>
            $(document).ready(function () {
                $("#titulo").typeahead({
                    source: function (query, resultado) {
                        $.ajax({
                            url: "buscar.php",
                            type: "POST",
                            dataType: "json",
                            data: {query: query},
                            success: function (data) {
                                resultado($.map(data, function (item) {
                                    return item;
                                    }));
                                    }
                                });
                            }
                        });
                    });
        </script>
    </body>
</html>

1 respuesta 1

0

Puedes hacerlo utilizando AJAX, para ello crea una archivo o función php que realice una búsqueda en la tabla según el valor seleccionado en el combobox y te devuelva los demás valores via JSON.

  1. Crea una función o archivo php que reciba un parámetro o lea vía POST. Esta función solo debe buscar en la tabla el registro según el valor suministrado, que vendría a ser el elemento seleccionado en el combobox.

    // Obtienes el elemento POST
    $elemento = $_POST['elemento'];
    // Haces el query para buscar el registro filtrando 
    $sqlB="select * from sitios where Sitios='".$elemento."'";
    $resB= mysqli_query($mysqli, $sqlB);
    $registro = mysqli_fetch_array($resB)
    // Devuelves el registro como un arreglo JSON  
    echo json_encode($registro);
    
  2. Crea una función para detectar cuando seleccionen un elemento del combobox para que ejecute una llamada AJAX a la función del archivo PHP, suministrando como parámetro por POST el elemento seleccionado y como tipo de datos JSON.

     $(document).on('click', '#id_del_combobox', function(){
        // Si buscarás por el id registrado en el combobox
        var elemento = $(this).val();
        // o bien si buscarás por el texto del combobox
        var elemento = $('option:selected',this).text();
        $.ajax({
         type: "POST",               
         url: archivo.php,                  
         dataType: "json",           
         data: {'elemento' : elemento},           
         success: function(data){    
            $("#input1").prop('value',data.valor1);
            $("#input2").prop('value',data.valor2); 
         }
     });
    

Con la respuesta de la llamada AJAX te devolverá un arreglo con el cual podrás asignar via jquery el valor a cada input de forma dinámica.

Espero haberte ayudado. Saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.