Hacer dos sumas en un form

danielandres19 · #1 (**permalink**) 24/05/2016, 14:24

Hola,

Estoy tratando de hacer un formulario que me realizará un par de sumas de inputs distintos, he logrado hacerlo, pero el problema es que necesito enviar estos datos a una base de datos, y los campos tienen el mismo nombre, como podría hacerlo por ID o alguna otra manera para que sean sumados por aparte?

Código HTML:

<html>
<head>
<title>Sumar campos</title>

<script language="javascript" type="text/javascript">
var total = 0;
function sumacampos(grupo)
{

var suma = 0;

//el "CampoaSumar" son los campos textBox que se sumaran
for(var i=0, campos = document.getElementsByName(grupo); i < campos.length; i++)
{

//Recorro el vector de los campos y realizo la suma
total = suma;
suma += parseFloat(campos[i].value);
if (isNaN(suma)) suma = total;

}

//Asigno la suma a un label que ira cambiando de acuerdo a la cantidad que se capture
document.getElementById(grupo+'TOTAL').innerHTML = suma;



}


</script>
</head>
<body>
<form name="form1">
<input type="text" name="CampoaSumar" value="0" onkeyup="sumacampos(this.name);" />
<input type="text" name="CampoaSumar" value="0" onkeyup="sumacampos(this.name);" />
<input type="text" name="CampoaSumar" value="0" onkeyup="sumacampos(this.name);" />
<br/>
Total:<label id="CampoaSumarTOTAL" >0</label>
<br/><br/>
<input type="text" name="CampoaSumar2" value="0" onkeyup="sumacampos(this.name);"
/>
<input type="text" name="CampoaSumar2" value="0" onkeyup="sumacampos(this.name);" />
<input type="text" name="CampoaSumar2" value="0" onkeyup="sumacampos(this.name);" />
<br/>
Total:<label id="CampoaSumar2TOTAL" >0</label>
</form>


</body>
</html>

Alexis88 · #2 (**permalink**) 24/05/2016, 14:36

Crea un arreglo de elementos:

Código HTML:

Ver original<input name="foo[0]" />
<input name="foo[1]" />
<input name="foo[2]" />
<input name="foo[3]" />

Y recíbelo como tal:

Código PHP:

Ver originalforeach ($_POST['foo'] as $clave => $valor){
    //Instrucciones
}

En donde la $clave representará a cada índice del arreglo, mientras que $valor representará a cada uno de los valores.

danielandres19 · #3 (**permalink**) 24/05/2016, 14:50

Hola Alexis,

Gracias por tu respuesta, pero el problema es que necesito que la suma se vea reflejada dinámicamente como muestro en el primer ejemplo, es decir, que sea mostrada al usuario en el mismo formulario y luego si sean enviados los valores vía POST para insertarlos en la base de datos, no sé si fui claro, de igual manera muchas gracias por tu ayuda.

Alexis88 · #4 (**permalink**) 24/05/2016, 15:12

Cita:

Iniciado por danielandres19

[...] necesito que la suma se vea reflejada dinámicamente como muestro en el primer ejemplo, es decir, que sea mostrada al usuario en el mismo formulario [...]

El código que muestras, realiza eso para cada bloque. Si lo que deseas es sumar los totales, solo tienes que tomar a ambos valores y sumarlos:

Código Javascript:

Ver originalvar totales = document.querySelectorAll("[id$=TOTAL]"),
    total1 = parseFloat(totales[0].innerHTML),
    total2 = parseFloat(totales[1].innerHTML),
    resultado = total1 + total2;
 
alert(resultado);

Lo que hago es tomar a todos los elementos cuyos id terminen en "TOTAL"; luego, tomo el contenido del primero y segundo de ellos (que, en este caso, son precisamente dos), los parseo y sumo. El resultado se mostrará en un mensaje de alerta, pero puedes asignarlo como contenido de cualquier elemento del documento.

danielandres19 · #5 (**permalink**) 24/05/2016, 15:20

Hola de nuevo,

Creo que sigues sin entenderme xd , lo que quiero hacer es lograr tener la suma tal y como la tengo en estos momentos, pero poder enviar los valores de

Código HTML:

<input type="text" name="CampoaSumar" value="0" onkeyup="sumacampos(this.name);" />
<input type="text" name="CampoaSumar" value="0" onkeyup="sumacampos(this.name);" />
<input type="text" name="CampoaSumar" value="0" onkeyup="sumacampos(this.name);" />
<br/>
Total:<label id="CampoaSumarTOTAL" >0</label>

y también los de

Código HTML:

<input type="text" name="CampoaSumar2" value="0" onkeyup="sumacampos(this.name);"/>
<input type="text" name="CampoaSumar2" value="0" onkeyup="sumacampos(this.name);" />
<input type="text" name="CampoaSumar2" value="0" onkeyup="sumacampos(this.name);" />
<br/>
Total:<label id="CampoaSumar2TOTAL" >0</label>

a un archivo PHP por método POST, pero obviamente me va a tomar solo el último valor de cada uno, ya que están nombrados de la misma manera (CampoaSumar, Campoasumar2), espero ser claro y puedas entenderme,

Gracias por tu ayuda

Alexis88 · #6 (**permalink**) 24/05/2016, 15:34

Precisamente para que no tome solo al último valor de cada grupo es que debes enumerarlos como te lo indiqué al inicio. Así recibirás a cada uno de los valores.

Al menos debiste probar antes de responder.