Ejemplo PHP
Enviar datos al servidor
Partiendo de un select
:
Dada
<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 inquietud presentada en los comentarios dejé disponible en GitHub el código fuente para 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 así:
<?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
Ajax
.