Pasar variables desde JavaScript a un fichero PHP de procesar Formulario.

ylodis · #1 (**permalink**) 09/12/2009, 06:50

Hola,

Pese a ser novato en PHP y JS intento pasar variables entre los dos sistemas.
Mi caso es que tras validar un formulario y averiguar Pais y Ciudad por Javascript, lintento modificar con JS dos campos hidden del formulario y pasarlos a un fichero de proceso POST y recuperarlos desde ahí.
Se que en teoría puede hacerse, por lo que pediría a quien sepa como hacerlo que me muestre un código de ejemplo.

maycolalvarez · #2 (**permalink**) 09/12/2009, 07:06

te recuerdo que JS se ejecuta desde el cliente y PHP desde el servidor, por el cual no tienen comunicación directa, la unica forma de pasar datos entre ambos es enviar solicitudes HTTP vía formularios GET o POST, que es el sistema tradicional que "recarga la pagina" o una simple redireccion; window.location="pagina.php?varibleget=valor";

Otra técnica avanzada seria AJAX que te permite hacer lo anterior sin necesidad de refrescar la página "algo así como por debajo de la mesa", existen framework como jQuery que te ayudan a enviar POST via AJAX, pero por otro lado está XAJAX un framwork php que te facilita enormemente el manejo de ajax desde php y sin muchas complicaciones con JS.

Te recomiendo investigues sobre AJAX y elijas la mejor opcion para implementarlo

ylodis · #3 (**permalink**) 09/12/2009, 07:17

Hola,

Gracias por tu ayuda.
Se que JS y PHP se ejecutan en diferentes tiempos, pero dado que hablamos de 2 ficheros distinto (Formulario.html y Proceso.php), no entiendo porque hay que refrescar la página o usar AJAX, ¿ No hay otra forma de pasar una variable hidden y que la reciba Proceso.php ?

jackson666 · #4 (**permalink**) 09/12/2009, 08:04

Cita:

Iniciado por ylodis

Hola,

Gracias por tu ayuda.
Se que JS y PHP se ejecutan en diferentes tiempos, pero dado que hablamos de 2 ficheros distinto (Formulario.html y Proceso.php), no entiendo porque hay que refrescar la página o usar AJAX, ¿ No hay otra forma de pasar una variable hidden y que la reciba Proceso.php ?

Definitivamente, no...
Acordate que PHP se ejecuta del lado del servidor! Como haces sin refrescar la pagina (haciendo submit por ejemplo), o mediante AJAX abriendo el script, para pasarle un dato al archivo PHP????

Es simple, o refrescas la pagina, o lo haces con AJAX, otra no hay che...

JoseTejada · #5 (**permalink**) 09/12/2009, 08:16

Usando Ajax es de esta manera:
archivo "formulario.html"

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin t&iacute;tulo</title> 
<script language="javascript"> 
    var http; 
   function getHTTP(){ 
           var xmlhttp; 
            try 
            { 
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");                 
            } 
            catch(e) 
            { 
                try 
                { 
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
                } 
                catch(e) 
                { 
                    try 
                    { 
                        xmlhttp = new XMLHttpRequest(); 
                    } 
                    catch(e) 
                    { 
                        xmlhttp= false;                                             
                    } 
                     
                } 
             
            } 
     
        return xmlhttp; 
 
   } 
   http=getHTTP(); 
   function enviarDato(){ 
           if(http){ 
            var nombre=document.getElementById("nombre").value; 
            var codigo=document.getElementById("codigo").value; 
            http.open("GET","proceso.php?nombre="+nombre+"&codigo="+codigo); 
            http.onreadystatechange = comunicacionPHP; 
            http.send(null); 
        }else 
            alert("No hay HTTP"); 
   } 
   function comunicacionPHP(){ 
           if(http.readyState == 4) 
        {         
                if(http.status == 200){ 
                    rspta = http.responseText; 
                    //Aqui va la respuesta del servidor 
                    alert(rspta); 
                } 
        } 
   } 
</script> 
</head> 
 
<body> 
<form onsubmit="javascript:{return false;}"> 
Ingresar nombre : <input type="text" name="nombre" id="nombre" /> 
<input type="hidden" name="codigo" id="codigo" value="12345" /> 
<br /> 
<input type="button" onclick="enviarDato()" value="Enviar dato"/> 
</form> 
</body> 
</html>

y el otro "proceso.php"

Código PHP:

  <?php 
    $txt = "El nombre enviado por el cliente es : ".$_GET["nombre"]." y el codigo hidden es : ".$_GET["codigo"]; 
    echo $txt; 
?>

Espero que sirva...suerte

dggluz · #6 (**permalink**) 09/12/2009, 08:35

Si entendí bien, ylodis no pretende hacer nada raro: tiene un formulario, modifica unos campos con javascript, cuando el formulario es enviado lo procesa con PHP ¿Es así? ¡Suerte!

ylodis · #7 (**permalink**) 09/12/2009, 09:23

Hola,

dgluz lo entiende perfectamente, y por ello dado que hay dos ficheros implicados no entiendo porque no puede hacerse sin entrar en grandes complicaciones, recargar páginas, etc.
Si el usuario puede cambiar el contenido de un campo del formulario, enviar y que PHP lo procese(desde luego en diferentes tiempos), no entiendo porque JS no puede hacer eso mismo con un campo hidden.

GatorV · #8 (**permalink**) 09/12/2009, 09:26

Tema movido desde PHP a Javascript

JoseTejada · #9 (**permalink**) 09/12/2009, 09:58

Amigo ylodis, el campo hidden si es posible enviarse a proceso.php, precisamente puse un campo hidden en el codigo de mi respuesta anterior, en todo caso si no es eso lo que necesitas, pues no entiendo muy bien tu duda

...

dggluz · #10 (**permalink**) 09/12/2009, 10:41

Lo que tienes que hacer es modificar el value del campo hidden en cuestión. Para ello primero tienes que referenciar el campo desde una variable. Eso es fácil si el campo tiene un atributo id (id es la contracción de identificador; no debieran existir dos elementos con el mismo id en la misma página):

Código HTML:

<input type="hidden" name="tuCampo" id="tuId" value="un valor" />

Para referenciar desde javascript a ese elemento HTML, puedes hacer lo siguiente:

Código javascript:

Ver originalvar elCampo=document.getElementById('tuID');

Para modificarle el atributo value simplemente tienes que hacer:

Código javascript:

Ver originalelCampo.value='el nuevo valor';

O directamente:

Código javascript:

Ver originaldocument.getElementById('tuId').value='el nuevo valor';

Espero que haya quedado más o menos claro. Cualquier duda consúltala. ¡Suerte!

ylodis · #11 (**permalink**) 09/12/2009, 10:45

Hola,

Quiero que en un formulario de correo, el usuario cambie un campo text (por ejemplo su nombre) y que JS cambie otro campo hidden para que me llege el pais de procedencia del eMail que otro fichero en PHP recibirá y enviará. Habia pensado en hacerlo con metodo=post

La solución que propone JoseTejada, aunque se la agredezco, me parece compleja para modificar un sólo campo (ademása emplea el metodo=get ¿ no hay una solución que cambie el campo con una o pocas lineas de código ?

dggluz · #12 (**permalink**) 09/12/2009, 11:48

Y ¿cómo piensas averiguar el país?

ylodis · #13 (**permalink**) 09/12/2009, 12:11

Pensaba hacer

Habiendo hecho antes en el <head> :

<SCRIPT TYPE="text/javascript"src="XXXj.maxmind.com/app/geoip.js"></script>

Sustituyendo XXX por Hache Te Te Pe dos puntos //

dggluz · #14 (**permalink**) 09/12/2009, 12:37

No sé cómo se usa ese script, pero lo que tendrías que hacer es obtener el país en una variable y asignarle ese valor al value de tu campo hidden como te mostré más arriba. Se me ocurre que eso quizás puedas hacerlo en la carga de la página (onload) o sino en el envío del formulario (onsubmit). ¡Suerte!

ylodis · #15 (**permalink**) 09/12/2009, 12:59

El script lo devuelve en la variable geoip_country_name()

He intentado reproducir tu solución dggluz, pero no hay manera.
En el formulario Hago :

Código:

<input type="hidden" name="pais" id="tuId" value="un valor" />

Para validar los campos del formulario tengo otro fichero JS y al final del todo hago :

Código:

	document.getElementById(tuId).value = 'el nuevo valor');
	alert("Valor : "+document.correo.pais.value);

Tabien he probado :

Código:

	document.getElementById('tuId').value = 'el nuevo valor');
	alert("Valor : "+document.correo.pais.value);

Como ves intento ser lo más literal posible a la solución que aportas, pero debe haber algún problema porque ni siquiera se ejecuta el alert, cosa que sí hace cuando transformo la linea anterior en comentarios.
En caulquier caso haga lo que haga, el valor final que recibe el procesador de formulario es"un valor".

dggluz · #16 (**permalink**) 09/12/2009, 13:16

Debes usar algún depurador de código javascript para ver cuál es el error que tienes (quizás ese paréntesis del final de la línea en que asignas el valor, quizás que el id - al ser un literal de cadena, o una constante - debe ir entre comillas, quizás las dos cosas); firefox tiene una consola de errores incorporada que te puede ser muy útil (herramientas->consola de errores); o por lo menos ver tu código completo para saber dónde está el error. Por otro lado, si el valor que quieres enviar lo obtienes desde geoip_country_name(), entonces deberías hacer:

Código javascript:

Ver originaldocument.getElementById('tuId').value = geoip_country_name();

¡Suerte!

ylodis · #17 (**permalink**) 09/12/2009, 13:52

Lo he puesto como dices y funciona bien cuanto lo pongo en vista previa del Dreamweaver, pero cuando lo subo por FTP y lo pruebo en Internet, mantiene el valor original y ni siquiera se ejecuta el alert. El fichero que pide los datos y que ejecuta la validación JS es HTML y me he asegurado de subir tambien el fichero JS, con lo cual alucino.

Respecto a la consola de errores Firefox no he visto que se queje por JS, los unicos warnings que salen corresponden a CSS

ylodis · #18 (**permalink**) 10/12/2009, 07:22

Hola,

El problema ya está resuelto. Se trataba simplemente de que entre el nombre del fichero JS yla linea donde se cargaba había una mayuscula de diferencia y según parece el emulador de Dreamwaver no emula tan bien como debiera.

Quiero dar las gracias a dggluz por su ayuda y apoyo, porque no conocía la consola de errores de Firefox que me ha permitido localizar el fallo en mis códigos.

dggluz · #19 (**permalink**) 10/12/2009, 10:02

De nada, estamos para ayudar.

PD: seguramente tu hosting tiene linux que diferencia mayúsculas y minúsculas en los nombres de archivo y la PC donde probaste primero el código tiene windows, que no lo hace.

VJAlvarez · #20 (**permalink**) 19/10/2010, 13:39

Cita:

Iniciado por JoseTejada

Usando Ajax es de esta manera:
archivo "formulario.html"

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin t&iacute;tulo</title> 
<script language="javascript"> 
    var http; 
   function getHTTP(){ 
           var xmlhttp; 
            try 
            { 
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");                 
            } 
            catch(e) 
            { 
                try 
                { 
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
                } 
                catch(e) 
                { 
                    try 
                    { 
                        xmlhttp = new XMLHttpRequest(); 
                    } 
                    catch(e) 
                    { 
                        xmlhttp= false;                                             
                    } 
                     
                } 
             
            } 
     
        return xmlhttp; 
 
   } 
   http=getHTTP(); 
   function enviarDato(){ 
           if(http){ 
            var nombre=document.getElementById("nombre").value; 
            var codigo=document.getElementById("codigo").value; 
            http.open("GET","proceso.php?nombre="+nombre+"&codigo="+codigo); 
            http.onreadystatechange = comunicacionPHP; 
            http.send(null); 
        }else 
            alert("No hay HTTP"); 
   } 
   function comunicacionPHP(){ 
           if(http.readyState == 4) 
        {         
                if(http.status == 200){ 
                    rspta = http.responseText; 
                    //Aqui va la respuesta del servidor 
                    alert(rspta); 
                } 
        } 
   } 
</script> 
</head> 
 
<body> 
<form onsubmit="javascript:{return false;}"> 
Ingresar nombre : <input type="text" name="nombre" id="nombre" /> 
<input type="hidden" name="codigo" id="codigo" value="12345" /> 
<br /> 
<input type="button" onclick="enviarDato()" value="Enviar dato"/> 
</form> 
</body> 
</html>

y el otro "proceso.php"

Código PHP:

  <?php 
    $txt = "El nombre enviado por el cliente es : ".$_GET["nombre"]." y el codigo hidden es : ".$_GET["codigo"]; 
    echo $txt; 
?>

Espero que sirva...suerte

VJAlvarez · #21 (**permalink**) 19/10/2010, 13:48

José... buen día.
Estoy en el mismo problema excepto que yo tengo una variable obtenida de la acumulación de de respuestas a formulario con JS. He visto su solución para pasar el valor de una forma a PHP y me parece que la solución para pasar esa variable puede ser similar. He intentado pero no obtengo el resultado requerido. La pregunta es: en su código, cómo se enviaría mi variable JS a PHP. Gracias.

VJAlvarez · #22 (**permalink**) 13/01/2011, 09:59

José... feliz año. Sólo ahora vi su respuesta y me funcionó. Gracias.