JavaScript - Sumar textfields de varios formularios y mostrar el resultado en un DIV

   
Vista:

Sumar textfields de varios formularios y mostrar el resultado en un DIV

Publicado por Fortino Benítez (2 intervenciones) el 22/05/2013 01:59:11
Hola que tal. Soy nuevo en esto y estoy tratando de realizar una calculadora de gastos. Los rubros de los gastos están colocados en diferentes formularios y quiero que al capturar todas las cantidades, se sumen y se presenten en un div. Hay que considerar que son diez rubros con sus respectivos listados de gastos. De antemano muchísimas gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Sumar textfields de varios formularios y mostrar el resultado en un DIV

Publicado por xve (1594 intervenciones) el 22/05/2013 08:10:46
Hola Fortino, los rubros donde se encuentran? en una base de datos? o están en la web puestos en div's?
si nos puedes indicar con mas detalle...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Sumar textfields de varios formularios y mostrar el resultado en un DIV

Publicado por Fortino Benítez (2 intervenciones) el 22/05/2013 21:46:29
Hola que tal. Si, las estoy colocando en diferentes divs. Cada rubro esta en un acordeón. Adjunto parte del código que uso. (Tal vez no es la mejor manera, pero comienzo en esto y es la solución que encontré)

1
2
3
4
5
6
7
8
9
10
<div class="accordion">
    <div id="tab-1">
        <a href="#tab-1" class="tab">Comunicaciones</a>
        <div class="content">
        	<form class="contact_form" form name="miform">
            <ul>
            <li>
         	<label for="telefono">Teléfono Fijo: </label>
         	<h3>$</h3><input type="text" name="operando1" onkeyup="calc()" />
            </li>
(continuando hasta tener todos los gastos)

Así para cada rubro y tipo de gasto, son 10 tab's. y he estado intentando hacer el cálculo con este código en java:

1
2
3
4
5
<script>
function calc(){
var form = document.miform;
document.getElementById("total").innerHTML = Number(form.operando1.value)+ Number(form.operando2.value)+ Number(form.operando3.value)+ Number(form.operando4.value)+ Number(form.operando5.value); }
</script>


y colocando el resultado en el div:
1
<div  id="total"></div>


Mi problema es que no puedo hacer que sume el total de todos los datos capturados en los inputs. he intentado con: document.getElementByName pero nada. Se que estoy haciendo algo mal, solo que no se exactamente en donde.

xve, la verdad es que estaría super agradecido con esto, porque estoy tratando de comprenderlo y aplicarlo para mi proyecto de tesis.
Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Sumar textfields de varios formularios y mostrar el resultado en un DIV

Publicado por xve (1594 intervenciones) el 23/05/2013 08:03:45
Hola Fortino, tienes varias maneras de acceder a los valores de los formularios con JavaScript, aquí te muestro un par de ejemplos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form id="formTest">
    <input type="input" name="input1" value="100">
    <input type="input" name="input2" value="999">
</form>
 
<script type='text/javascript'>
    // opcion 1
    var opcion1=document.getElementsByName("input1")[0].value;
    document.write(opcion1);
 
    // opcion 2
    var form=document.forms["formTest"];
    var opcion2=form.elements["input1"].value;
    document.write(opcion2);
</script>


En tu código veo esta linea que creo que esta mal:
<form class="contact_form" form name="miform"> ... as repetido dos veces la palabra form

Para tu código, la función calc podría ser algo así:
1
2
3
4
5
6
7
8
9
function calc(){
    var form=document.forms["miform"];
    var num1=Number(form.elements["operando1"].value);
    var num2=Number(form.elements["operando2"].value);
    var num3=Number(form.elements["operando3"].value);
    var num4=Number(form.elements["operando4"].value);
    var num5=Number(form.elements["operando5"].value);
    document.getElementById("total").innerHTML = num1+num2+num3+num4+num5;
}


Espero que te sirva... coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar