Sumar valores con javascript y reutilizarlos con php

k1r02 · #1 (**permalink**) 09/05/2009, 23:46

Tengo una duda por resolver, estoy creando un formulario que crea cuadros de texto segun la necesidad del usuario(eso ya esta listo). Ahora lo que necesito es que esos valores se sumen segun la cantidad de cuadros de texto y se muestre el total al final para despues guardar todos estos datos en una BD mediante un for, un while o algo que se me ocurra.

<html>
<head>
<script language="javascript">

function sumar()
{
var a, total = 0;
var elements = document.getElementsById('sumar');

for(a=0; a<elements.length; a++){
total += (parseFloat(elements[a].value));
}
document.getElementById("resultado").value = total;
}

</script>
<title>suma y suma</title>
</head>
<body>
<?php
$v = 1;
if(isset($_POST["ok"]))
{
$numero = $_POST["valor"];
$numero++;
$v = $numero;
}
?>
<form method="post" action="#">

<?php for($a=0;$a<$v;$a++) { ?>
<input type="text" name="<?php echo "sumar$a"; ?>" <?php if(isset($_POST["ok"])) echo "value='" . $_POST["sumar$a"] . "'"; ?> id='sumar' onKeyUp="sumar()" size="8" />+
<?php } ?>
//
<input type="hidden" name="valor" value="<?php echo $a; ?>" />
<input type="submit" name="ok" value="otro input"/>=
<input type="text" name="total" id="resultado" readonly="readonly" />
</form>
</body>
</html>

David · #2 (**permalink**) 10/05/2009, 00:02

El id debe ser único en el documento, de la forma como estás haciendo, todos los inputs tienen como id "sumar", lo cual es incorrecto, asigna un número consecutivo al id: sumar1, sumar2, sumar3...

Puedes unificar el name, usar sumar[] como name, así puedes recorrerlos en Javascript usando getElementsByName("sumar[]") y en PHP podrás recorrer $_POST['sumar'] como un array.

k1r02 · #3 (**permalink**) 10/05/2009, 14:03

Gracias David
me lo podrias explicar mejor es que no entiendo muy bien el JS ese del getElements es nuevo para mi yo solo soy diseñador grafico y tengo muy poco conocimiento en programcion

David · #4 (**permalink**) 10/05/2009, 19:26

Puedes leer aquí:
https://developer.mozilla.org/En/DOM...ElementsByName

Lo que hace es devolver una colección de elementos con el name especificado:

Código Javascript:

Ver originalvar coleccion = document.getElementsByName("sumar[]");
for (i = 0; elem = coleccion[i]; i++) {
    /* Se hará un recorrido por todos los elementos con el name especificado
        En cada iteración el elemento siguiente estará en la variable elem */
}

k1r02 · #5 (**permalink**) 10/05/2009, 21:12

No david lo siento la funcion no cumple su cometido

David · #6 (**permalink**) 10/05/2009, 21:46

¿Qué cometido es el que querías lograr y que esa función no cumple?

GatorV · #7 (**permalink**) 11/05/2009, 09:47

Tema trasladado desde PHP

k1r02 · #8 (**permalink**) 11/05/2009, 11:28

la funcion debe recorrer todos lo elemento que tengan como nombre o como id el mismo (sumar)
para despues sumarlos y mostrar el resultado en otro lado. al momento de que los input se convierten en arreglo sumar[1],sumar[2], sumar[nveces]....

David · #9 (**permalink**) 11/05/2009, 11:33

¿Cómo tienes los nombres e ids de los campos en estos momentos? ¿Unificaste el name y el id los pusiste diferente para cada campo como te había mencionado? Además, dentro del bucle for debes realizar la suma (como está, sólo tiene una línea comentada)

k1r02 · #10 (**permalink**) 11/05/2009, 15:41

asi lo hice tal como tu me lo mencionaste David pero sigue sin funcionar, solo me salta una duda que valor pongo dentro de los corchetes despue del Name

<script language="javascript">

function sumar()
{
var a, total = 0;
var coleccion = document.getElementsByName("sumar[]"); // que valor lleva en medio de estos carcteres?

for (i = 0; elem = coleccion[i]; i++) {
total += (parseFloat(elements[i].value));
}
document.getElementById("resultado").value = total;
}
}
</script>


<?php
$v = 1;
if(isset($_POST["ok"]))
{
$numero = $_POST["valor"];
$numero++;
$v = $numero;
}
?>
<form method="post" action="#">
<?php for($a=0;$a<$v;$a++) { ?>

<input type="text" name="<?php echo "sumar$a"; ?>" <?php if(isset($_POST["ok"])) echo "value='" . $_POST["sumar$a"] . "'"; ?> id='sumar' onKeyUp="sumar()" size="8" /> +

<?php } ?>

<input type="hidden" name="valor" value="<?php echo $a; ?>" />
<input type="submit" name="ok" value="otro input"/> =
<input type="text" name="total" id="resultado" readonly="readonly" />

</form>

k1r02 · #11 (**permalink**) 11/05/2009, 15:42

y ya cambie el
<input type="text" name="<?php echo "sumar$a"; ?>" <?php if(isset($_POST["ok"])) echo "value='" . $_POST["sumar$a"] . "'"; ?> id='sumar' onKeyUp="sumar()" size="8" />

a
<input type="text" name="<?php echo "suma$a"; ?>" <?php if(isset($_POST["ok"])) echo "value='" . $_POST["sumar$a"] . "'"; ?> id='sum' onKeyUp="sumar()" size="8" />

hector2c · #12 (**permalink**) 11/05/2009, 15:44

veo que estas usando javascript puro, podria ayudarte usango jQuery, no tendrias problemas???

k1r02 · #13 (**permalink**) 11/05/2009, 16:23

vaya hermano tu dime como usarlo y yo lo adecuo a mis necesidades

hector2c · #14 (**permalink**) 11/05/2009, 17:40

hola k1r02, pues, aqui te envio una propuesta, espero te ayude, si te das cuenta en el procesa.php paso elemento por elemento del $_post, cosa que puedes almacenarlos en tu bd, suerte!!!

David · #15 (**permalink**) 11/05/2009, 19:08

Hay algunas cosas que deberías cambiar para que funcione como te indiqué. Esto:

Código Javascript:

Ver originaltotal += (parseFloat(elements[i].value));

Debería ser:

Código Javascript:

Ver originaltotal += (parseFloat(elem.value));

Además, como te comenté, el id debe ser único, mientras que el name deberías cambiar por sumar[] (sin nada dentro de los corchetes)

k1r02 · #16 (**permalink**) 13/05/2009, 17:31

me doy por vencido David, ya me hice pelotas y no puedo hacer que la funcion haga la suma sin importar cuantos haya, he estado leyendo en foro pero todos saben cuantas cajas de texto tienen en mi caso es diferente el nombre y el id del input aumenta a necesidad del usuario.

podrias copiar el codigo a tu editor y probar mi codigo y revisar lo que estoy tratando de hacer.
Gracias te lo agradeceré en verdad y podre decir que si ers Grande David

David · #17 (**permalink**) 13/05/2009, 20:00

Vamos, no te des por vencido k1ro2, así únicamente podrás seguir aprendiendo

.

Haz las modificaciones que te comenté y seguro que te va a funcionar.

Los ids deben ser consecutivos (para que no se repitan): sumar1, sumar2, sumar3, ...
El name lo debes unificar (debe ser igual para todos los elementos): sumar[].

En todo caso, con sólo tener los ids consecutivos ya podrás hacer un bucle for para recorrer los elementos (sin ni siquiera tener que cambiar el name):

Código Javascript:

Ver originaltotal = 0;
for (i = 0; elem = document.getElementById("sumar" + i); i++) {
    total += (parseFloat(elem.value));
}

hector2c · #18 (**permalink**) 14/05/2009, 08:11

heeeeeeey, te envie la solución??? descargate el fichero???

http://www.box.net/shared/ix19o9xu0n

primero haz click en crear para que se agregen cajas, luego ingresa valores numericos a las cajas (depende de ti darle validadores para que ingresen solo numeros).

luego click en sumar, y listo :s, no te des muchas vuetlas en el asunto amigo !!

cuando haces click en el tercer boton, no recuerod el nombre, te envia tooodas las cajas a otra pagina, en formato POST, donde las recorro cosa que puedas recuperarlas

ahie sta todo lo que necesitas!!!

k1r02 · #19 (**permalink**) 25/05/2009, 21:58

Esta excelente ya quedo Resuelto