How can I autollen 2 inputs depending on what I select in a dropdown?

Question

How can I autollen 2 inputs depending on what I select in a dropdown?

Navigation

#1 by (1 votes)

1

I have a dropdwon which shows as options the fields of a table in mysql, up to here everything is fine. I also have 2 inputs which I want to fill according to what is chosen in the dropdown. The information with which I want these inputs to be filled is data from the same record that was selected in the dropdown.

The table is called bidders in mysql, the dropdown shows the id of each bidder and in one input I want to show the name and in the other input the nationality. All this depending on the id you select.

This is the php in which the dropdown and the inputs are shown:

$query = 'SELECT * FROM oferentes';

     $result = $mysqli->query($query);

     ?>
     <div class="row ">
       <div class="input-field col s12 m10 l10">
       <p style="text-align:left;"> ID del Oferente:</p>
       <select  id="IDOferente" class="browser-default col s12 m10 l10" name="IDOferente" onchange="pruebita2()">
         <option value="" disabled selected>Seleccione el ID del Oferente</option>
         <?php
         while ( $row = $result->fetch_array() )
         {
             ?>


          <option value=" <?php echo $row['ID_Oferente'] ?> "
                  data-nombre="<?php echo $row['NombreOferente'] ?>"
                  data-nacionalidad="<?php echo $row['Nacionalidad'] ?>">
            <?php echo $row['ID_Oferente']; ?>

          </option>

          <?php
      }
      ?>
       </select>
       </div>
     </div>
     
     
     
     <div class="row">
    <div class="input-field col s12 m10 l10">
      <i class="material-icons prefix">folder_shared</i>
      <input id="nombre"  type="text" name="nombre" class="validate" required>
      <label for="nombre">Nombre Oferente</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12 m10 l10">
      <i class="material-icons prefix">textsms</i>
      <input id="nacionalidad"  type="text" name="nacionalidad" class="validate" required>
      <label for="nacionalidad">Nacionalidad</label>
    </div>
  </div>

  <div class="row">
  <div class="input-field col s12 m10 l10">
  <select class="browser-default" type="hidden" id="TipoOferente" name="TipoOferente" required>
    <option value="" disabled selected>Seleccione el tipo de Oferente</option>
    <option value="Individual">Individual</option>
    <option value="Consorcio">Consorcio</option>
  </select>
</div>
</div>


<script >

window.onload = function(){

    var select = document.getElementById("IDOferente");

    select.addEvenListener("change", function(){
        var nombre = select.options[select.selectedIndex].dataset.nombre;
        var nacionalidad = select.options[select.selectedIndex].dataset.nacionalidad;

        document.getElementById("nombre").value = nombre;
        document.getElementById("nacionalidad").value = nacionalidad;
    }
}
</script>

mysql php input autocompletar dropdownlist

asked by Rodriguez1222 16.05.2018 в 22:38

source

1 answer

Subtract two Arrays in javascript Creating an arducky with HoodLoader2 (problems when uploading the sketch "installation_sketch.ino")

score 1 · Accepted Answer

You can do it with JavaScript:

window.onload = function(){

    var select = document.getElementById("IDOferente");

    select.addEvenListener("change", function(){
        var nombre = select.options[select.selectedIndex].dataset.nombre; 
        var nacionalidad = select.options[select.selectedIndex].dataset.nacionalidad;

        document.getElementById("nombre").value = nombre;
        document.getElementById("nacionalidad").value = nacionalidad;
    }
}

And now when you load the page you must add with php in your option:

$query = 'SELECT * FROM oferentes';

     $result = $mysqli->query($query);

     ?>
     <div class="row ">
       <div class="input-field col s12 m10 l10">
       <p style="text-align:left;"> ID del Oferente:</p>
       <select  id="IDOferente" class="browser-default col s12 m10 l10" name="IDOferente" onchange="pruebita2()">
         <option value="" disabled selected>Seleccione el ID del Oferente</option>
         <?php
         while ( $row = $result->fetch_array() )
         {
             ?>


          <option value=" <?php echo $row['ID_Oferente'] ?> " 
                  data-nombre="<?php echo $row['nombre_Oferente'] ?>"
                  data-nacionalidad="<?php echo $row['nacionalidad_Oferente'] ?>">
            <?php echo $row['ID_Oferente']; ?>

          </option>

          <?php
      }
      ?>
       </select>
       </div>
     </div>


     <div class="row">
    <div class="input-field col s12 m10 l10">
      <i class="material-icons prefix">folder_shared</i>
      <input id="nombre"  type="text" name="nombre" class="validate" required>
      <label for="nombre">Nombre Oferente</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12 m10 l10">
      <i class="material-icons prefix">textsms</i>
      <input id="nacionalidad"  type="text" name="nacionalidad" class="validate" required>
      <label for="nacionalidad">Nacionalidad</label>
    </div>
  </div>

Ahroa every time the select is changed, JavaScript will take the value of the custom attributes of the option and put them in the corresponding input.