0

Buenas tardes, tengo un combobox donde hago select a una tabla en mysql llamada 'sitios', dentro de esta tabla tengo las columnas (Referencia, Sitio, Domicilio, Telefono, Ciudad) y la columna "Sitio" son los datos que se despliegan en el combobox. Lo que no he podido hacer es que dependiendo del "Sitio" que seleccione, se coloque el valor de (Referencia, Domicilio, Telefono, Ciudad), en un input cada uno de estos datos.

Enseguida pongo mi codigo:

<!DOCTYPE html>

<html>
    <head>
        <?php
        $user = "root";
        $pass = "";
        $serv = "localhost";
        $dataB = "cdv1";
        
        $mysqli = new mysqli($serv, $user, $pass, $dataB);
        
        ?>
        
        <meta charset="UTF-8">
        <title>Solicita tu Cuenta</title>
        <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>
        
    </head>
    
    <body>
        <form name="formSoli" action="Confirmacion.php" class="formSolicitud" method="POST">
            <h1 class="formTitulo">Solicitud</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" 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>';
                }
                
                ?>
            </select>
            
            <!--            input hidden-->
            <input type="text" name="referencia" id="ref" value="">
            
            <input type="hidden" name="domicilio" id="dom" value="">
            <input type="hidden" name="telefono" 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" class="formButton" value="Enviar Datos">
        </form>
        
    </body>
</html>

Muchas gracias por leer!

1 respuesta 1

0

Buenas amigo lo único que tienes que hacer es declararle el valor a los input con la function .val("valor de bd") cuando el usuario ejecute el método change() en el select.

NOTA: Para el ejemplo se simula la data que viene de la BD la idea es simular los datos para agregarse a los respectivos input.

Quite la propiedad para ocultar los select para notar el cambio de datos

Ejemplo funcional

var EjemploDatos = {
  domicilio:"mi casa",
  telefono:"12345678",
  ciudad:"Nueva Ciudad",
}

$("#sitio").change(function(){
  $("#dom").val(EjemploDatos.domicilio)
  $("#tel").val(EjemploDatos.telefono)
  $("#ciudad").val(EjemploDatos.ciudad)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html>
    <head>
        <?php
        $user = "root";
        $pass = "";
        $serv = "localhost";
        $dataB = "cdv1";
        
        $mysqli = new mysqli($serv, $user, $pass, $dataB);
        
        ?>
        
        <meta charset="UTF-8">
        <title>Solicita tu Cuenta</title>
        <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>
        
    </head>
    
    <body>
        <form name="formSoli" action="Confirmacion.php" class="formSolicitud" method="POST">
            <h1 class="formTitulo">Solicitud</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" 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>';
                }
                
                ?>-->
                <!--Nuevo codigo-->
                <option value="1">sitio 1</option>
  <option value="2">sitio 2</option>
  <option value="3">sitio 3</option>
                <!--Nuevo codigo-->
            </select>
            
            <!--            input hidden-->
            <input type="text" name="referencia" id="ref" value="">
            
            <input  name="domicilio" id="dom" value="">
            <input  name="telefono" id="tel" value="">
            <input  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" class="formButton" value="Enviar Datos">
        </form>
        
    </body>
</html>

4
  • primero que nada muchisimas gracias por tu respuesta, es funcional el ejemplo y es la funcion que busco, solo que puse los valores de mis columnas de mi base de datos y no me tira ni un error pero los input no me tiran algun valor, saludos!
    – Eta Saints
    el 17 dic. 2017 a las 2:32
  • amigo esta funcionalidad es solo frontend para que te funcione tienes que usar ajax y hacer una peticion a un php que obtiene los datos de la BD. y cuando retorne el ajax hay si llenar los input el 17 dic. 2017 a las 2:51
  • Por mas que busco sacarle la vuelta a ajax al parecer es la mejor opcion o unica :/ gracias amigo, puntuar tu respuesta como util no se si te de puntos o algo soy nuevo haciendo preguntas aqui (ya que si me fue util tu respuesta amigo y tu ejemplo es lo que busco!), de nuevo gracias
    – Eta Saints
    el 17 dic. 2017 a las 3:08
  • si amigo si la respuesta te ayudo dale como aprobada para que los demás programadores que tengan el mismo problema encuentren la solución mas rápido que bueno ayudarte saludos. el 17 dic. 2017 a las 3:14

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.