0

Tengo un combobox donde hago select a una tabla 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 e podido hacer es que dependiendo del "Sitio que seleccione, se coloque el valor de (Referencia, Domicilio, Telefono, Ciudad) en un input cada uno.

<!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>

vi un ejemplo con Json pero no lo pude adaptar a lo que busco, un saludo y desde ya gracias![introducir la descripción de la imagen aquí]1

2
  • podrias pasar el html css y js para ayudarte mejor Commented el 10 dic. 2017 a las 4:34
  • pase el archivo muy amable por la sugerencia, espero sea mas entendible, saludos
    – Eta Saints
    Commented el 10 dic. 2017 a las 4:58

2 respuestas 2

0

mira a ver si algo como esto te puede servir, lo he hecho un poco a ciegas sin poder probar, asi que seguramente haya errores de sintaxis pero la idea creo que se puede ver.

Básicamente la idea es:

  • Antes del bucle while, declaramos un array javascript vacio

  • en el bucle while, vamos llenando ese array con objetos de cada uno de los sitios

  • En el select añadimos onchange para que dispare la función que cambiara los datos de los inputs

  • En la función, se comprueba que valor tiene el select y en funcion a eso, se cargan los datos en los inputs correspondientes.

Un saludo, espero que te sirva de ayuda

```

    $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/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 onchange="loadDataOnInputs()" 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;">
          <script>var sitios=[];</script>
            <?php
            $query = $mysqli -> query ("SELECT * FROM Sitios");
            while ($valores = mysqli_fetch_array($query)) {
                ?><script>
                  let unSitio = {
                    Referencia:'<?php echo $valores[Referencia];?>',
                    Sitio:'<?php echo $valores[Sitio];?>',
                    Domicilio:'<?php echo $valores[Domicilio];?>',
                    Telefono:'<?php echo $valores[Telefono];?>',
                    Ciudad:'<?php echo $valores[Ciudad];?>'
                  }
                  sitios.push(unSitio);
                </script> <?php
                echo '<option value="'.$valores[Referencia].'">'.$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>
    <script>
      function loadDataOnInputs(){
        let sitio = document.querySelector("#sitio");

        sitios.forEach(element=>{
          if (element.Referencia == sitio.value){
            let refe = document.querySelector('#ref');
            let dom = document.querySelector('#dom');
            let tel = document.querySelector('#tel');
            let ciudad = document.querySelector('#ciudad');

            refe.value = element.Referencia;
            dom.value = element.Domicilio;
            tel.value = element.Telefono;
            ciudad.value = element.Ciudad;
          }
        })
      }
    </script>
</body>

```

1
  • primero que nada muchas gracias Athos Oc, probe el codigo y no me funciono, trate cambiando el onchange que ya tenia en el select pero aun asi no me coloca la referencia correspondiente en el input.
    – Eta Saints
    Commented el 10 dic. 2017 a las 17:27
0

Primero que nada muchas gracias, mira lo intente asi, cheque si habia algun error en sintaxis y lo vi todo en orden, solo cambie un onchange que ya tenia por otro tipo de evento y le deje el onchange al script, que puede ser lo que este aplicando mal?

<!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 onchange="loadDataOnInputs()" name="sitio" id="sitio" class="formSelect" title="Seleccione el sitio correspondiente" onmousedown="if(this.options.length>8){this.size=6;}" onmouseout='this.size=0;' onblur="this.size=0;">
<!--                onchange='this.size=0;'-->
                <script>var sitios=[];</script>
                <?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].'")
//                }
                
                $query = $mysqli -> query ("SELECT * FROM Sitios");
                while ($valores = mysqli_fetch_array($query)) {
                    ?><script>
                    let unSitio = {
                        Referencia:'<?php echo $valores[Referencia];?>',
                        Sitio:'<?php echo $valores[Sitio];?>',
                        Domicilio:'<?php echo $valores[Domicilio];?>',
                        Telefono:'<?php echo $valores[Telefono];?>',
                        Ciudad:'<?php echo $valores[Ciudad];?>',
                    }
            sitios.push(unSitio);
                    </script><?php
                    echo '<option value="'.$valores[Referencia].'">'.$valores[Sitio].'</option>';
                }
                
                ?>
            </select>
            
            
            <!--            input hidden-->
            <input type="text" name="ref" id="ref" value="">
            
            <input type="text" name="dom" id="dom" value="">
            <input type="text" name="tel" id="tel" value="">
            <input type="text" 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>
        
        <script>
            function loadDataOnInputs() {
                let sitio = document.querySelector('#sitio');
                
                sitios.forEach(element=>{
                    if (element.Referencia == sitio.value) {
                        let ref = document.querySelector('#ref');
                        let dom = document.querySelector('#dom');
                        let tel = document.querySelector('#tel');
                        let ciudad = document.querySelector('#ciudad');
                        
                        ref.value = element.Referencia;
                        dom.value = element.Domicilio;
                        tel.value = element.Telefono;
                        ciudad.value = element.Ciudad;
                    }
                })
            }
            </script>
        
    </body>
</html>

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.