How to put data in input, depending on the value of a combobox?

Question

How to put data in input, depending on the value of a combobox?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have a combobox where I select a table called 'sites', within this table I have the columns (Reference, Site, Address, Phone, City) and the column "Site" are the data that are displayed in the combobox . What I could not do is that depending on the "Site you select, place the value of (Reference, Address, Phone, City) in an input each.

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

I saw an example with Json but I could not adapt it to what I'm looking for, greetings and thank you ] 1

mysql jquery ajax php7

asked by Eta Saints 10.12.2017 в 03:56

source

2 answers

Styles in view using Laravel 5.2 Separate chain with split and store the data only in necessary variables

score 0 · Answer 1

Look to see if something like this can help you, I've done it a little blindly without being able to prove, so surely there are syntax errors but the idea I think you can see.

Basically the idea is:

Before the while loop, we declare an empty javascript array
in the while loop, let's fill that array with objects from each of the sites
In the select we add onchange to trigger the function that changes the data of the inputs
In the function, the value is checked and, depending on that, the data is loaded into the corresponding inputs.

Greetings, I hope it helps you

'' '

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

'' '

score 0 · Answer 2

First of all thank you very much, look what I tried, check if there were any errors in syntax and I saw everything in order, just change an onchange that I already had for another type of event and leave the onchange to the script, which can what is this wrong?

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