0

Tengo un pequeño formulario conectado a una base de datos donde el usaurio debe escoger distintas opciones
La base de datos tiene la tabla material que tiene los atributos:

  • Id (llave primaria)
  • Nombre del material
  • Descripción
  • Precio

Este es un combobox que jala el id del material pero al usuario le muestra el nombre del material:

<div class="small-group">
   <label for="deco">Material de mesas y sillas</label>
   <select name="deco">
      <?php while($datos = mysqli_fetch_array($query1)){?>
      <option value="<?php echo $datos['id_m']?>"><?php echo $datos['material']?></option><?php }?>
   </select>
</div>

Este es el código del input donde quiero que muestre en tiempo real el precio dependiendo del material que escogió:

<div class="small-group">
   <label for="preme">Costo del material</label>
   <input id="preme" name="preme" type="text" value=""/>
</div>

Como obtengo el valor del select de arriba dependiendo de lo que el usuario haya elegido?
En el value del input tengo que hacer el código PHP para seleccionar la llave primaria y muestre el precio?

11
  • Es decir buscas que sin que se recargue la página se llene el input con el valor del select?
    – user128299
    Commented el 24 sept. 2020 a las 21:12
  • Puedes hacerlo con Ajax.
    – alanfcm
    Commented el 24 sept. 2020 a las 21:12
  • @BetaM Si exactamente
    – lugm
    Commented el 24 sept. 2020 a las 21:19
  • Como te dice Alan, necesitas manejar la petición vía AJAX, busca ejemplos con Jquery o fetch
    – user128299
    Commented el 24 sept. 2020 a las 21:19
  • 1
    También puedes evitar peticiones AJAX usando atributos de datos (dataset) como en esta respuesta
    – Triby
    Commented el 24 sept. 2020 a las 21:33

1 respuesta 1

1

Para realizar una petición de datos desde HTML a PHP, lo puedes hacer por medio de Javascript.

En primer lugar necesitas identificar tu combobox con un id y crear una referencia a este elemento en Javascript, junto con tu input donde aparecerá el precio:

const combobox_material = document.getElementById('material');
const input_precio = document.getElementById('preme');

Después debes asociar un evento al combobox, en este caso será el evento change, que se lanzará cuando se seleccione una de sus opciones:

combobox_material.addEventListener('change', function()
{
    /* Cuando se detecte un cambio, es decir, cuando se seleccione una opción
    debes realizar una petición a tu PHP */
});

Para realizar peticiones a tu PHP, puedes usar la API fetch de Javascript:

fetch('RUT_HACIA_TU_PHP', {
    method: 'POST',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        id_material: this.value
    })
})
.then(respuesta => respuesta.json())
.then(function(respuesta)
{
    input_precio.value = respuesta.precio
});

En resumen, el código para detectar cambios en el combobox, mostrar el precio en el input y realizar la petición a PHP, sería el siguiente:

<script>

const combobox_material = document.getElementById('material');
const input_precio = document.getElementById('preme');

combobox_material.addEventListener('change', function()
{
    fetch('RUT_HACIA_TU_PHP', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            id_material: this.value
        })
    })
    .then(respuesta => respuesta.json())
    .then(function(respuesta)
    {
        input_precio.value = respuesta.precio
    });
});

</script>

Ahora solo falta escribir el código PHP que devuelva el precio del material consultado.

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