variables globales

mafersa · #1 (**permalink**) 20/10/2015, 17:40

Hola. Tengo un problema que no doy solucionado hace días.
Estoy haciendo una página donde recojo los valores de un formulario con onchange y quiero pasar esos datos a una variable php.

Tengo el siguiente código que cargo con body onload

<SCRIPT language=Javascript>

function CalcVals() {

// RECOJO LOS VALORES DEL INPUT EDITABLE DEL FORMULARIO EN UNA VARIABLE - s Simulación

nVs=parseFloat(document.theform.INPUT_nVs.value); // Número vacas

}

//End hiding script from old browsers -->
</SCRIPT>

después pongo en php:
<?php $mivarPHP='<script type="text/javascript">;document.writeln (nVs);</script>';
echo("mivar $mivarPHP");
?>

Sin embargo no me sale ningún valor.
Se supone que al definir las variables sin var delante se convierten en variable global (aunque también he probado definirlas previamente a la función y no va) y las líneas php deberían cargar la varibale mivarPHP con el valor que coge del formulario pero no lo hace.

Alguna pista?
Gracias

mafersa · #2 (**permalink**) 20/10/2015, 17:55

Incluso más sencillo

<SCRIPT language=Javascript>

var nVs=1; // Número vacas

function CalcVals() {

// RECOJO LOS VALORES DEL INPUT EDITABLE DEL FORMULARIO EN UNA VARIABLE - s Simulación

nVs=2; // Número vacas

}

//End hiding script from old browsers -->
</SCRIPT>

<?php $mivarPHP='<script type="text/javascript">; document.writeln (nVs);</script>';
echo("mivar $mivarPHP");
?>

La variable php se queda con el valor 1 y no recoge el dos que cambia la funcion (esta se carga con body onload y en el formulario con onchange

Alexis88 · #3 (**permalink**) 21/10/2015, 00:13

Debes de tener siempre pero siempre presente que PHP se ejecuta en el lado del servidor y JavaScript en el del cliente. Los eventos del DOM (Modelo de Objetos del Documento) no pueden ser detectados desde el lado del servidor; solo desde el lado del cliente.

Lo que te sugiero hacer es realizar la asignación del valor mediante una petición asíncrona (AJAX), para que así tengas a ambos lenguajes por separado, obteniendo un código más limpio, y los cambios en el lado del cliente generen nuevos valores en el lado del servidor.

Un pequeño ejemplo:

Código HTML:

Ver original<select id = "foo">
    <option value = "1">Uno</option>
    <option value = "2">Dos</option>
    <option value = "3">Tres</option>
</select>

Código Javascript:

Ver originaldocument.querySelector("#foo").addEventListener("change", function(){
    var ajax = new XMLHttpRequest(), valor = this.value;
 
    ajax.open("GET", "ejemplo.php?variable=" + valor, true);
    ajax.send();
    ajax.addEventListener("load", function(){
        if (this.status == 200){
            console.log("La asignación del nuevo valor se realizó satisfactoriamente");
        }
    }, false);
    ajax.addEventListener("error", function(){
        console.log("Ha ocurrido un error: " + this.statusText);
    }, false);
}, false);

Código PHP:

Ver original//ejemplo.php
 
$bar = $_GET['variable'];

Cuando se elija un valor del combo, se ejecutará una petición asíncrona en la que se enviará el valor seleccionado hacia el archivo "ejemplo.php" mediante el método GET. Este lo recibe y cuando esta operación se haya completado o haya ocurrido un error, se mostrará un mensaje en la consola del navegador advirtiendo de esto al usuario.

Más información: AJAX.

Un saludo

mafersa · #4 (**permalink**) 21/10/2015, 02:38

En primer lugar muchas gracias por la respuesta.

No manejo bien Ajax aunque sé lo que es. Tampoco soy experto en javascript, manejo mejor el php.

No consigo implementar bien lo que dices. Te pego el código del archivo php donde he puesto tu ejemplo para ver si lo consigo sacar adelante.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT language=Javascript>

document.querySelector("#foo").addEventListener("c hange", function(){
var ajax = new XMLHttpRequest(), valor = this.value;

ajax.open("GET", "ejemplo.php?variable=" + valor, true);
ajax.send();
ajax.addEventListener("load", function(){
if (this.status == 200){
console.log("La asignación del nuevo valor se realizó satisfactoriamente");
}
}, false);
ajax.addEventListener("error", function(){
console.log("Ha ocurrido un error: " + this.statusText);
}, false);
}, false);

</SCRIPT>

</HEAD>

<BODY>
<select id = "foo">
<option value = "1">Uno</option>
<option value = "2">Dos</option>
<option value = "3">Tres</option>
</select>

<?php
$bar = $_GET['variable'];
echo("var $bar");
?>

</BODY>
</HTML>

He puesto como ves el javascript en el head. También he probado a ponerlo como una función que se carga con body onload pero no me funciona.
Perdón por el poco nivel pero el javascript se me atraviesa un poco.

Gracias

mafersa · #5 (**permalink**) 21/10/2015, 02:50

También he probado:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

</HEAD>

<BODY>

<select id = "foo" onchange=CalcVals()>
<option value = "1">Uno</option>
<option value = "2">Dos</option>
<option value = "3">Tres</option>
</select>
<SCRIPT language=Javascript>

document.querySelector("#foo").addEventListener("c hange", function(){
var ajax = new XMLHttpRequest(), valor = this.value;

ajax.open("GET", "ejemplo.php?variable=" + valor, true);
ajax.send();
ajax.addEventListener("load", function(){
if (this.status == 200){
console.log("La asignación del nuevo valor se realizó satisfactoriamente");
}
}, false);
ajax.addEventListener("error", function(){
console.log("Ha ocurrido un error: " + this.statusText);
}, false);
}, false);

</SCRIPT>

<?php
$bar = $_GET['variable'];
echo("var $bar");
?>

</BODY>
</HTML>

Y tampoco funciona

Alexis88 · #6 (**permalink**) 21/10/2015, 12:31

El código PHP del ejemplo, se encuentra en otro archivo. Por eso fue que te dije que tendrías un código separado y más limpio. Antes de implementar esto, sería bueno saber cuál es el fin de actualizar ese valor, es decir, ¿qué piensas hacer con él? Eso puede generar que esto cambie un poco.

Un saludo

mafersa · #7 (**permalink**) 21/10/2015, 12:54

La página que estoy haciendo la puedes ver en:
http://www.consuvet.com/sip/index.php

Hay texto sucio que corresponde a código que pongo para ver el contenido de las variables.

Como ves es un simulador que hace las veces como de hoja de cálculo en el sentido de que si metes un valor en el input se deben recalcular el resto de casillas.

Por eso el proceso de lo que hago es declarar las variables en php, recoger el valor de los inputs de formulario en javascript y pasar su valor a php para hacer los cálculos correspodientes y poner su contenido en la casilla correspondiente.
Siempre en la misma página.

En http://www.consuvet.com/sip/
puedes ver una versión sólo con variables javascript que de momento quiero cambiar.

A ver si supero el paso de pasar las variables javascript y php y consigo acabarlo.

Gracias de todas maneras.

Saludos.

Alexis88 · #8 (**permalink**) 21/10/2015, 13:10

¿Y si lo haces solo con JavaScript? Digo, con JavaScript también puedes realizar cálculos, a menos de que guardes cada cambio en una base de datos, aunque no tendría sentido que lo hagas sino hasta el final de todo, es decir, cuando se hayan ingresado todos los valores y se hayan realizado todos los cálculos.

mafersa · #9 (**permalink**) 21/10/2015, 13:13

Con Javascript solo lo hago al revés, es decir primero cargo el valor de las casillas en blanco con el valor de referencia (primera columna) y permito modificarlo.
Pero lo que tenemos comprobado con otros simuladores es que queda mejor dejar la casilla en blanco pero que por defecto cuente con el valor de referencia.
Por eso prefiero hacerlo con php y sólo usar javascript para recoger los valores que se entran.
Además en javascript el código de los cálculos sería accesible y con php no.

Saludos

mafersa · #10 (**permalink**) 21/10/2015, 13:14

El código que me propusiste no funciona si se pone como url la misma de la propia página?

Alexis88 · #11 (**permalink**) 21/10/2015, 13:32

El que los cálculos sean accesibles o no, no es algo que debiera preocuparte. Debes empezar preguntándote sobre qué puede representar una amenaza de seguridad para tu aplicación y qué no. Un cálculo aritmético no creo que vaya a causarte dolores de cabeza; a menos de que cuando guardes los datos en tu base de datos, no implementes un algoritmo de seguridad, pero eso ya no sería problema del cálculo ni de JavaScript sino de tu script PHP.

Lo que pretendes hacer se suele hacer siempre en el lado del cliente por un tema de rendimiento, ya que realizar peticiones asíncronas (AJAX) al servidor para realizar cálculos aritméticos que se dispararán por cada cambio en las cajas de texto, puede sobrecargar al servidor, además de que siempre va a tomar más tiempo la espera de la respuesta de un proceso mediante una petición asíncrona que uno realizo de forma directa en el mismo lado del cliente.

En cuanto a la otra pregunta, te lo vuelvo a repetir, el código PHP debe de estar en otro archivo. Puede estar en el mismo, pero no tiene sentido que vuelvas a cargar todo el código cuando solo deseas recibir un dato.

Un saludo

mafersa · #12 (**permalink**) 12/07/2016, 23:45

Muchas gracias por tus consejos