Pasar variable Javascript por Post y recogerla con PHP

Querer pasar una variable de Javascript a PHP es la típica duda que les suele surgir a mucha gente.

El problema surge porque Javascript es un lenguaje que se ejecuta en el cliente, y PHP en el servidor por lo que no hay una forma directa de hacerlo, tenemos que pasarla por GET o por POST a través de un formulario con lo que tendríamos que recargar la página o recoger el valor en otra distinta. Os planteo los como hacerlo por POST recogiendo el valor en otra página

Lo primero vamos a crear la pagina que contendrá la variable Javascript. Utilizaremos un formulario que al darle a Enviar nos llevará a la otra página.

prueba.php

Esta sería la parte de Javascript donde en la función enviar asignamos el valor a la variable

<script type="text/javascript">
    var variableJs ="Esta es mi variable en JS";

    function onEnviar(){
       document.getElementById("variable").value=variableJs;
    }
</script>

Y este el formulario donde vamos a darle el valor a "variable", cuando se pulsa el boton se invoca al método onsubmit que llamará a nuestra función Javascript

<form action="prueba2.php" id="formulario" method="post" name="formulario" onsubmit="onEnviar()">
    <input id="variable" name="variable" type="hidden" />
    <input id="enviar" type="submit" value="Enviar" />
</form>

 

prueba2.php

Leemos los parámetros que se pasaron por POST, en este caso "variable"


  <?php
    echo "Mi variable de JS: ".$_POST['variable'];
  ?>

Y con esto nos saldría en pantalla:

Mi variable de JS: Esta es mi variable en JS

20 thoughts on “Pasar variable Javascript por Post y recogerla con PHP

  1. Estimado, una consulta respecto del ejemplo pasando variables javascript a php por post, la consulta es la siguiente:

    por que cuando le aasigno el valor de un campo a la variable esta no se envía y la hoja prueba2.php me arroja undefinied??

     

    desde ya agradezco tu respuesta…

    1. Tendr铆a que ver el c贸digo para decirte. Pero has comprobado que la variable est谩 dentro del form? Y que el nombre est谩 bien escrito?

      1. Primero agradezco que hayas respondido, muchas gracias. Bueno el tema es que tomé tú código para realizar una prueba, ya que quiero asignarle el valor de un campo que debería ser ingresado manualmente, para no enredar tanto el ejemplo el código lo modifiqué de la siguiente manera:

        <script type="text/javascript">
            var variableJs = document.formulario.valor.value;

            function onEnviar(){
               document.getElementById("variable").value=variableJs;
            }
        </script>

        <form action="prueba2.php" id="formulario" method="post" name="formulario" onsubmit="onEnviar()">
            <input id="valor" name="valor" type="text" />
            <input id="variable" name="variable" type="hidden" />
            <input id="enviar" type="submit" value="Enviar" />

         

        Agradeceré enormemente la respuesta, desde ya muchas gracias.

        1. Ya que la variable quieres recogerla cuando pulsas el bot贸n, yo meter铆a var variableJs = document.formulario.valor.value; dentro de la funcion onEnviar en mi ejemplo estaba fuera porque no cambiaba pero tu al recoger el valor de un input metelo dentro.

          Tambi茅n te aconsejo que hagas var variableJs = document.getElementById(“valor”).value; ya que tienes asignado el id al input. Quedando:

          function onEnviar(){
          聽聽 聽聽聽 聽var variableJs = document.getElementById(“valor”).value;
          聽聽聽聽聽聽聽 document.getElementById(“variable”).value=variableJs;
          聽聽聽 }

          1. Hola de nueva cuenta:

            He posteado una pregunta pero leyendo a detalle quiero consultar:

            En mi caso la caja de texto forma parate de un array, echame una mano por favor para recojer el valor

            he probado con:

            function onEnviar(){
                    var variableJs = document.getElementById(“valor[$i]”).value;
                    document.getElementById(“itemeliminar”).value=variableJs;
                }

  2. Saludos,

    muy buena explicacion… ! tambien porfa me podrias decir como puedo pasar variables pero dentro de un link <a href="">  … </a> en javascript.

     

    Gracias por la ayuda.!

  3. Hola:

    Excelente la explicación. Sin embargo, yo sigo teniendo problemas, ya que la nueva página debe abrirse en forma de popup, y sin embargo no he podido pasar los parámetros a la nueva ventana. Tu podrías indicarme como hacerlo. 

    Mira el .js es así:

        function abrir(browser) {
            var rut = document.getElementById("RutCliente").value;
            var first = document.getElementById("FirstName").value;
            var last = document.getElementById("LastName").value;
            var url="encriptado.jsp?";

            window.open(url, '', 'location=no,scrollbars=no,resizable=no');
        }

    Y el formulario es algo así:

        <form action="" method="POST" onsubmit="javascript:abrir(BrowserDetect.browser);">
            <table style="width:617px" border="0">
                <tr>
                </tr>

                <tr>
                    <td class="samplesSampleFieldTitle" >RUT CLIENTE:</td>
                    <td><input class="samplesFieldStyle" type="text" id="RutCliente" name="<%=mask_html(fldnRut)%>" value="33333333-3"></td>
                </tr>

                <tr>
                    <td class="samplesSampleFieldTitle" >NOMBRE CLIENTE:</td>
                    <td><input class="samplesFieldStyle" type="string" id="FirstName" name="<%=mask_html(fldnFirstName)%>" value="Placido"></td>
                </tr>

                <tr>
                    <td class="samplesSampleFieldTitle" >APELLIDO CLIENTE:</td>
                    <td><input class="samplesFieldStyle" type="string" id="LastName" name="<%=mask_html(fldnLastName)%>" value="Domingo"></td>
                </tr>

                <tr>
                    <td> <input type="submit" value="Boton Enviar"> </td> 
                </tr>

    </table></form>

     

    Y gracias por la ayuda. Saludos

  4. Hola que tal:

    Llevo varios días sin pegar el ojo con un asunto:

    Lo que deseo hacer es eliminar un item de un array que pertenece a una sesión, intento tomar la posición del elemento a elminar sin conseguirlo, acontinuación les muestro mi codigo

    este codigo muestra la lista de pedidos como si fuera un cesto de compra, solamente uso el item y el nombre del producto solicitado

    $cart_result = $session->get('cart'); //sesión de mi joomla guardada en cart_result
                echo "<table>";
                echo '<form action="miphp.php" method="POST">';
                foreach($cart_result['items'] as $position=>$item)
                { 
                echo "<tr> <td> codigo: ".$item['item_number']."</td>"; 
                echo "<td> Nombre: ".$item['name']."</td> <td> </td>"; 
                echo "<td> <input type='hidden' name=posicion[".$position."] value='".$position."'/></td> <td><input type='submit' name='eliminar' value ='X'/> </td></tr>";     
                }

    …El punto es que el miphp.php al intentar recoger el valor que tiene la caja de texto oculto no va bien, quiero recibir solamente la posición del item a eliminar para proceder a eliminarlo. Espero me haya explicado

     

    Doy ampios agradecimientos por adelantado

     

    1. Hola! No lo he probado pero me suena mal q tengas el form fuera de l foreach porq de esa forma cada submit enviara todas los posiciones, prueba a meter un form por cada. As铆 solo se enviara uno. Y con poner en el hidden name=”posici贸n” creo q valdr铆a.

  5. Hola, Me ayudo mucho ese metodo, pero tengo un problema….

    Ahora tengo que mandar esa variable a otro html y no puedo usar php (es un servidor de puro asp y c#)

    Megustaria saber si seria posible Recoger esa variable desde jquery o javaScript.

     

    Saludos y espero su respuesta 馃榾

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *