Suma dinamica de campos

bacdavi · #1 (**permalink**) 04/01/2010, 14:28

Hola hola amigos!
De nuevo molestando, me gustaría saber si alguno de ustedes me puede ayudar con mi duda.

Resulta que tengo un formulario como este:

Código HTML:

<!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>Suma automatica de campos</title>
</head>

<body>
<form>
    <table
     style="width: 580px; text-align: left; margin-left: auto; margin-right: auto;"
     border="0" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td>Nombre de Curso</td>
          <td>Zona</td>
          <td>Examen</td>
          <td>Total</td>
        </tr>
        <tr>
          <td>Curso 1</td>
          <td><input type="text" name="TXTzona[]" /></td>
          <td><input type="text" name="TXTexamen[]" /></td>
          <td><input type="text" name="TXTtotal[]" /></td>
        </tr>
        <tr>
          <td>Curso 2</td>
          <td><input type="text" name="TXTzona[]" /></td>
          <td><input type="text" name="TXTexamen[]" /></td>
          <td><input type="text" name="TXTtotal[]" /></td>
        </tr>
        <tr>
          <td>Curso 3</td>
          <td><input type="text" name="TXTzona[]" /></td>
          <td><input type="text" name="TXTexamen[]" /></td>
          <td><input type="text" name="TXTtotal[]" /></td>
        </tr>
        <tr>
          <td>Curso 4</td>
          <td><input type="text" name="TXTzona[]" /></td>
          <td><input type="text" name="TXTexamen[]" /></td>
          <td><input type="text" name="TXTtotal[]" /></td>
        </tr>
        <tr>
          <td>Curso 5</td>
          <td><input type="text" name="TXTzona[]" /></td>
          <td><input type="text" name="TXTexamen[]" /></td>
          <td><input type="text" name="TXTtotal[]" /></td>
        </tr>
      </tbody>
    </table>
</form>
</body>
</html>

Como verán mis campos son tipo array, sin embargo lo que deseo hacer es que al momento de ingresar la zona del curso 1 se sume con el examen del mismo y que se despliegue dicha suma en la casiila TXTtotal[] del curso 1.

es decir que a cada tr se le sumen los campos zona y examen en su respectiva casilla de total.

Alguno de ustedes que me brinde una luz...

Saludos, y gracias de antemano.

zerokilled · #2 (**permalink**) 05/01/2010, 02:26

necesitas de un bucle para ir por cada referencia de los campos. en tu caso, dado que los campos comparten los mismo nombres, puedes utilizarlos como array. por ejemplo,

Código:

<form onkeyup="
for(var i = 0; this['TXTzona[]'][i]; i++)
this['TXTtotal[]'][i].value = Number(this['TXTzona[]'][i].value) + Number(this['TXTexamen[]'][i].value);
">
...
</form>

en este ejemplo, los campos se suman cuando se ingresa un valor en cualquiera de los campos. mi recomendacion, si tienes campos adicionales ademas de los que muestras en el codigo, encierra los campos que deben carcularse en un elemento contenedor y agregas en este el evento. en el ejemplo, la suma se realiza sin importar el tipo de campo que se escribe.

bacdavi · #3 (**permalink**) 05/01/2010, 09:29

muchas gracias zerokilled, funciona de maravilla

Tema Resuelto! =D