2

Tengo la siguiente cuestión.

Estoy trayendo los datos de un Select desde JavaScript.

function lista() {
    var selected = document.getElementById("esp2");
    var selecte = selected.options[selected.selectedIndex].text;
    alert(selecte);
}

Con la variable selecte estoy guardando el valor para mandarlo a PHP:

<?php
$PHPvariable = "<script>document.write(selecte)</script>";
echo "PHPvariable = ".$PHPvariable;
?>

Me está devolviendo el siguiente error:

Uncaught ReferenceError: selecte is not defined

Espero me puedan ayudar, Muchas Gracias.

11
  • Como llamas a esa funcion? Recuerda que PHP se ejecuta antes que JS Commented el 18 ene. 2021 a las 20:16
  • De esta manera la estoy llamando <select id="esp2" onChange="lista();"> Commented el 18 ene. 2021 a las 20:19
  • Hola @JAIMEPOLANCO, la mejor forma de hacer es mediante una petición Ajax. Commented el 18 ene. 2021 a las 20:46
  • @DavidE.LunaM. puedes orientarme?, no se por donde empezar en AJAX. Commented el 18 ene. 2021 a las 21:07
  • @JAIMEPOLANCO, ¿Te sirve reproducir un ejemplo en JavaScript donde se realice una petición a PHP? Es decir, desde el lado del cliente (navegador) JavaScript haga una petición al servidor (que es el que tiene los script PHP). Me avisas para responderte con un ejemplo sencillo. Commented el 18 ene. 2021 a las 22:35

1 respuesta 1

5

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
9
  • 2
    Es una respuesta muy bien elaborada, se nota que te tomaste tu tiempo. +1
    – Triby
    Commented el 19 ene. 2021 a las 5:29
  • muchas gracias ya voy entendiendo un poco , lo puse en practica y me sale el siguiente error Warning: Undefined array key "seleccionar", la linea 2 que me da el error es: $variablePHP = $_GET['seleccionar']; Commented el 19 ene. 2021 a las 13:40
  • Gracias @Triby :) Commented el 19 ene. 2021 a las 23:11
  • Hola Jaime, ya hice una actualización en la que se deja disponible el ejemplo en el repositorio. Commented el 20 ene. 2021 a las 0:13
  • Muchas Gracias, me funciono a la perfecion. una segunda pregunta y perdona por abusar de tu tiempo y conocimiento, quiero usar la variable que acabe de capturar $VariablePHP en mi documento principal, la inserto de ls siguiente forma pero no hace nada include("archivo.php"); $prueba = mysqli_query($conexion,"SELECT * FROM $tabla_db7 WHERE idgrupo1='$variablePHP'"); Commented el 20 ene. 2021 a las 16:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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