Skip to main content
4 de 5
Actualización de información
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30

Ejemplo PHP

Enviar datos al servidor

Partiendo de un select :

<select name="seleccionar" id="seleccionar">
    ...
</select>

Para capturar su valor con JavaScript podrías hacer lo siguiente:

seleccionar.onchange = () => {
    console.log(seleccionar.value);
}

Es decir:

seleccionar.onchange = () => {
  console.clear();

  console.log(seleccionar.value);
}
<select id="seleccionar">
  <option value="">Seleccione un valor</option>
  <option value="valor1">Primer valor</option>
  <option value="valor2">Segundo valor</option>
  <option value="valor3">Tercer valor</option>
  <option value="valor4">Último valor</option>
</select>

Si embargo, para capturar el texto de la opción seleccionada y no su valor (bastante inusual) podrías plantearlo de esta manera:

seleccionar.onchange = () => {
  console.clear();

  const elemento = document.querySelector( `[value="${seleccionar.value}"]` );

  console.log(elemento.textContent);
};
<select name="seleccionar" id="seleccionar">
  <option value="">Seleccione un valor</option>
  <option value="valor1">Primer valor</option>
  <option value="valor2">Segundo valor</option>
  <option value="valor3">Tercer valor</option>
  <option value="valor4">Último valor</option>
</select>

Ahora bien, ya que tenemos claro esto, la pregunta es, ¿cómo pasar el valor de una variable JavaScript a PHP?

Se hace mediante una petición Ajax.

Por ejemplo, vamos a crear los fragmentos que siguen más abajo para reproducir el experimento.

Se tiene el siguiente fragmento HTML:

<select name="seleccionar" id="seleccionar">
    <option value="">Seleccione un valor</option>
    <option value="valor1">Primer valor</option>
    <option value="valor2">Segundo valor</option>
    <option value="valor3">Tercer valor</option>
    <option value="valor4">Último valor</option>
</select>

Podrías definir en JavaScript lo que sigue:

seleccionar.onchange = () => {
    let valor = seleccionar.value;
    let ruta = `archivo.php?seleccionar=${valor}`;

    // Enviamos nuestra petición al servidor 
    // con JavaScript:
    fetch(ruta)
        .then(respuesta => respuesta.text())
        .then(data => {
            console.log(data);
        })
};

En este caso, pasar el valor de un select como parámetro para que sea asignado a una variable PHP en el siguiente fragmento:

archivo.php:

<?php
$variablePHP = $_GET['seleccionar'];
echo $variablePHP;

Donde seleccionar es el índice de $_GET.

Pasar texto de la opción seleccionada

Para enviar el texto de la opción seleccionada se sigue el mismo procedimiento que en el caso anterior, pero, con una pequeña diferencia:

Se tiene el siguiente fragmento HTML:

<select name="seleccionar" id="seleccionar">
    <option value="">Seleccione un valor</option>
    <option value="valor1">Primer valor</option>
    <option value="valor2">Segundo valor</option>
    <option value="valor3">Tercer valor</option>
    <option value="valor4">Último valor</option>
</select>

Podrías definir en JavaScript lo que sigue, pero con una diferencia:

seleccionar.onchange = () => {
    console.clear();
    let texto = document.querySelector(`[value="${seleccionar.value}"]`).textContent;
    let ruta = `archivo.php?seleccionar=${texto}`;

    // Enviamos la petición a PHP con JavaScript:
    fetch(ruta)
        .then(respuesta => respuesta.text())
        .then(data => {
            console.log(data);
        })
};

Y finalmente, sin cambios, nuestro archivo PHP.

archivo.php:

<?php
$variablePHP = $_GET['seleccionar'];
echo $variablePHP;

Si desea profundizar sobre el uso de fetch podrías visitar la documentación oficial de Mozilla: Uso de Fetch

Actualización

Dada la siguiente inquietud presentada en los comentarios lo dejé disponible en GitHub con el objeto de facilitar su implementación.

Ten en cuenta que para evitar un error similar al descrito en el comentario:

Undefined array key "seleccionar" 

En la línea:

$variablePHP = $_GET['seleccionar'];

Deberás validarlo primero y una forma de hacerlo es mediante una función (no es obligatorio, pero puede ser más elegante) que incluya un operador ternario:

...
return ( $condicion ) ? "Verdadero" : "Falso";

Es decir, que nuestro código PHP completo quedaría:

<?php
function get( string $string ) {
    return ( isset($_GET[(string) $string]) )
        ? $_GET[(string) $string] : "";
}

$variablePHP = get("seleccionar");
echo $variablePHP;

De manera que, si seleccionar no existe devolverá una cadena vacía.

También se puede clonar directamente:

git clone https://github.com/dlunamontilla/ejemploAjax.git
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30