Jump to content

Suma de campos deshabilitados

jedi_windu
 Share

Recommended Posts

jedi_windu Newbie

jedi_windu

Posted
Posted

Hola a todos! De nuevo:

 

Tengo un problema: En el tema anterior mío (http://www.chilecomparte.cl/index.php?showtopic=1127356) Hice la suma de las variables para que me saliera un total en un campo deshabilitado. Ahora, lo que quiero hacer es sumar esos campos deshabilitados para que me dé un total. ¿Cómo lo puedo hacer?

 

Aún no soy muy entendido en javascript, pero igual sé algo. Aquí les mando el código del tema anterior

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Prueba</title>

<script>

 

function calcularTotalParcial(index){

var cantidad = document.getElementsByName("cantidad")[index];

var precio = document.getElementsByName("precio")[index];

var agregado1 = document.getElementsByName("agregado1")[index];

var agregado2 = document.getElementsByName("agregado2")[index];

var agregado3 = document.getElementsByName("agregado3")[index];

var total = document.getElementsByName("total")[index];

if((cantidad.value != "") && (precio.value != "") && (precio.value != "")) {

total.value = (parseInt(cantidad.value)*parseInt(precio.value)+parseInt(agregado1.value)+parseInt(agregado2.value)+parseInt(agregado3.value));

calcularTotal();

}

else{

if(total.value != ""){

total.value = "";

calcularTotal();

}

 

}

}

</script>

</head>

<body>

<form name="form1" method="post" action="">

<table width="700" border="0">

<tr>

<td colspan="2" class="bold">Sandwiches</td>

<td width="68" class="bold"><div align="center">Cantidad</div></td>

<td width="118" class="bold"><div align="center">Agregado 1</div></td>

<td width="116" class="bold"><div align="center">Agregado 2</div></td>

<td width="114" class="bold"><div align="center">Agregado 3</div></td>

<td width="59" class="bold"><div align="center">Total</div></td>

</tr>

<tr>

<td width="87" valign="top" class="footer"><span class="bold">Mayo</span></td>

<td width="108" valign="top"><div align="center">

<select name="precio" class="dayOfWeek" id="precio" onchange="calcularTotalParcial(0)">

<option value="0">Ninguno</option>

<option value="1400">As</option>

<option value="2200">Normal</option>

<option value="3200">Grande</option>

</select>

</div></td>

<td valign="top"><div align="center">

<input name="cantidad" type="text" class="dayOfWeek" onchange="calcularTotalParcial(0)" value="" size="5"/>

</div></td>

<td valign="top"><div align="center">

<select name="agregado1" class="dayOfWeek" id="agregado1" onchange="calcularTotalParcial(0)">

<option value="0">Ninguno</option>

<option value="100">Ají Verde</option>

<option value="100">Mayonesa</option>

<option value="300">Huevo</option>

<option value="400">Cebolla</option>

<option value="500">Americana</option>

<option value="500">Chucrut</option>

<option value="500">Lechuga</option>

<option value="500">Palta</option>

<option value="500">Poroto Verde</option>

<option value="500">Tocino</option>

<option value="600">Queso</option>

</select>

</div></td>

<td valign="top"><div align="center">

<select name="agregado2" class="dayOfWeek" id="agregado4" onchange="calcularTotalParcial(0)">

<option value="0">Ninguno</option>

<option value="100">Ají Verde</option>

<option value="100">Mayonesa</option>

<option value="300">Huevo</option>

<option value="400">Cebolla</option>

<option value="500">Americana</option>

<option value="500">Chucrut</option>

<option value="500">Lechuga</option>

<option value="500">Palta</option>

<option value="500">Poroto Verde</option>

<option value="500">Tocino</option>

<option value="600">Queso</option>

</select>

</div></td>

<td valign="top"><div align="center">

<select name="agregado3" class="dayOfWeek" id="agregado3" onchange="calcularTotalParcial(0)">

<option value="0">Ninguno</option>

<option value="100">Ají Verde</option>

<option value="100">Mayonesa</option>

<option value="300">Huevo</option>

<option value="400">Cebolla</option>

<option value="500">Americana</option>

<option value="500">Chucrut</option>

<option value="500">Lechuga</option>

<option value="500">Palta</option>

<option value="500">Poroto Verde</option>

<option value="500">Tocino</option>

<option value="600">Queso</option>

</select>

</div></td>

<td width="59" valign="top"><input name="total" type="text" disabled="disabled" class="dayOfWeek" id="total1" value="" size="10"/> </td>

</tr>

<tr>

<td width="87" valign="top" class="footer"><span class="bold">Tomate</span></td>

<td width="108" valign="top"><div align="center">

<select name="precio" class="dayOfWeek" id="precio" onchange="calcularTotalParcial(1)">

<option value="0">Ninguno</option>

<option value="1400">As</option>

<option value="2200">Normal</option>

<option value="3200">Grande</option>

</select>

</div></td>

<td valign="top"><div align="center">

<input name="cantidad" type="text" class="dayOfWeek" onchange="calcularTotalParcial(1)" value="" size="5"/>

</div></td>

<td valign="top"><div align="center">

<select name="agregado1" class="dayOfWeek" id="agregado1" onchange="calcularTotalParcial(1)">

<option value="0">Ninguno</option>

<option value="100">Ají Verde</option>

<option value="100">Mayonesa</option>

<option value="300">Huevo</option>

<option value="400">Cebolla</option>

<option value="500">Americana</option>

<option value="500">Chucrut</option>

<option value="500">Lechuga</option>

<option value="500">Palta</option>

<option value="500">Poroto Verde</option>

<option value="500">Tocino</option>

<option value="600">Queso</option>

</select>

</div></td>

<td valign="top"><div align="center">

<select name="agregado2" class="dayOfWeek" id="agregado2" onchange="calcularTotalParcial(1)">

<option value="0">Ninguno</option>

<option value="100">Ají Verde</option>

<option value="100">Mayonesa</option>

<option value="300">Huevo</option>

<option value="400">Cebolla</option>

<option value="500">Americana</option>

<option value="500">Chucrut</option>

<option value="500">Lechuga</option>

<option value="500">Palta</option>

<option value="500">Poroto Verde</option>

<option value="500">Tocino</option>

<option value="600">Queso</option>

</select>

</div></td>

<td valign="top"><div align="center">

<select name="agregado3" class="dayOfWeek" id="agregado3" onchange="calcularTotalParcial(1)">

<option value="0">Ninguno</option>

<option value="100">Ají Verde</option>

<option value="100">Mayonesa</option>

<option value="300">Huevo</option>

<option value="400">Cebolla</option>

<option value="500">Americana</option>

<option value="500">Chucrut</option>

<option value="500">Lechuga</option>

<option value="500">Palta</option>

<option value="500">Poroto Verde</option>

<option value="500">Tocino</option>

<option value="600">Queso</option>

</select>

</div></td>

<td width="59" valign="top"><input name="total" type="text" disabled="disabled" class="dayOfWeek" id="total2" value="" size="10"/> </td>

</tr>

</table>

</body>

</html>

 

OJO que el script no es mío lo saqué de internet y le puse algunas cosas mías, con ayuda de okinagua.

¡Gracias por la ayuda a todos!

 

¡Saludos!

:sw:

 

Link to comment
Share on other sites
Ra Newbie

Ra

Posted
Posted 

var suma;
suma = parseInt(document.getElementById('total1').value) + parseInt(document.getElementById('total2').value);

y si lo quieres mostrar en otro input

document.getElementById('totaltotal').value = suma;

Link to comment
Share on other sites
  • 2 weeks later...
crash512 Newbie

crash512

Posted
Posted

$(document).ready(function(){

$(".suma").change(function(){

var total=0;

$(".suma").each(function(){

if(parseInt($(this).val())>0){

total+=parseInt($(this).val());

}

 

});

$("#total").val(total);

});

});

 

con jquery te podria resultar este script no lo e probado lo hice recien

agregale la clase suma a los select para q los recorra, supuestamente el wn al cambiar el option de algun select con la clase suma el script recorre todos los select y le va sumando el valor del option seleccionado y al final donde dice $("#total").val(total); aqi es cuando deberia agregar la suma total al input donde quieres q de el valor, debes poner el id del input en donde dice "#total" y eso recuerda bajarte la libreria jquery pa q corra el script si te tira ataos es posible q no pesq por la guea del nan en una de esas o la parte del each no ta bien declarada pero ai vei en google o la documentacion oficial pa cachar si ta bien weno eso ojala te sirva aio aio dostors

Link to comment
Share on other sites
Ra Newbie

Ra

Posted
Posted

Probado y funcionando:

 

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Prueba</title>

<script>

function calcularTotal(){

document.getElementById('totaltotal').value = parseInt(document.getElementById('total1').value) + parseInt(document.getElementById('total2').value);

}

 

function calcularTotalParcial(index){

var cantidad = document.getElementsByName("cantidad")[index];

var precio = document.getElementsByName("precio")[index];

var agregado1 = document.getElementsByName("agregado1")[index];

var agregado2 = document.getElementsByName("agregado2")[index];

var agregado3 = document.getElementsByName("agregado3")[index];

var total = document.getElementsByName("total")[index];

if((cantidad.value != "") && (precio.value != "") && (precio.value != "")) {

total.value = (parseInt(cantidad.value)*parseInt(precio.value)+parseInt(agregado1.value)+parseInt(agregado2.value)+parseInt(agregado3.value));

calcularTotal();

}

else{

if(total.value != ""){

total.value = "";

calcularTotal();

}

 

}

}

</script>

</head>

<body>

<form name="form1" method="post" action="">

<table width="700" border="0">

<tr>

<td colspan="2" class="bold">Sandwiches</td>

<td width="68" class="bold"><div align="center">Cantidad</div></td>

<td width="118" class="bold"><div align="center">Agregado 1</div></td>

<td width="116" class="bold"><div align="center">Agregado 2</div></td>

<td width="114" class="bold"><div align="center">Agregado 3</div></td>

<td width="59" class="bold"><div align="center">Total</div></td>

</tr>

<tr>

<td width="87" valign="top" class="footer"><span class="bold">Mayo</span></td>

<td width="108" valign="top"><div align="center">

<select name="precio" class="dayOfWeek" id="precio" onchange="calcularTotalParcial(0)">

<option value="0">Ninguno</option>

<option value="1400">As</option>

<option value="2200">Normal</option>

<option value="3200">Grande</option>

</select>

</div></td>

<td valign="top"><div align="center">

<input name="cantidad" type="text" class="dayOfWeek" onchange="calcularTotalParcial(0)" value="0" size="5"/>

</div></td>

<td valign="top"><div align="center">

<select name="agregado1" class="dayOfWeek" id="agregado1" onchange="calcularTotalParcial(0)">

<option value="0">Ninguno</option>

<option value="100">Ají Verde</option>

<option value="100">Mayonesa</option>

<option value="300">Huevo</option>

<option value="400">Cebolla</option>

<option value="500">Americana</option>

<option value="500">Chucrut</option>

<option value="500">Lechuga</option>

<option value="500">Palta</option>

<option value="500">Poroto Verde</option>

<option value="500">Tocino</option>

<option value="600">Queso</option>

</select>

</div></td>

<td valign="top"><div align="center">

<select name="agregado2" class="dayOfWeek" id="agregado4" onchange="calcularTotalParcial(0)">

<option value="0">Ninguno</option>

<option value="100">Ají Verde</option>

<option value="100">Mayonesa</option>

<option value="300">Huevo</option>

<option value="400">Cebolla</option>

<option value="500">Americana</option>

<option value="500">Chucrut</option>

<option value="500">Lechuga</option>

<option value="500">Palta</option>

<option value="500">Poroto Verde</option>

<option value="500">Tocino</option>

<option value="600">Queso</option>

</select>

</div></td>

<td valign="top"><div align="center">

<select name="agregado3" class="dayOfWeek" id="agregado3" onchange="calcularTotalParcial(0)">

<option value="0">Ninguno</option>

<option value="100">Ají Verde</option>

<option value="100">Mayonesa</option>

<option value="300">Huevo</option>

<option value="400">Cebolla</option>

<option value="500">Americana</option>

<option value="500">Chucrut</option>

<option value="500">Lechuga</option>

<option value="500">Palta</option>

<option value="500">Poroto Verde</option>

<option value="500">Tocino</option>

<option value="600">Queso</option>

</select>

</div></td>

<td width="59" valign="top"><input name="total" type="text" disabled="disabled" class="dayOfWeek" id="total1" value="0" size="10"/> </td>

</tr>

<tr>

<td width="87" valign="top" class="footer"><span class="bold">Tomate</span></td>

<td width="108" valign="top"><div align="center">

<select name="precio" class="dayOfWeek" id="precio" onchange="calcularTotalParcial(1)">

<option value="0">Ninguno</option>

<option value="1400">As</option>

<option value="2200">Normal</option>

<option value="3200">Grande</option>

</select>

</div></td>

<td valign="top"><div align="center">

<input name="cantidad" type="text" class="dayOfWeek" onchange="calcularTotalParcial(1)" value="0" size="5"/>

</div></td>

<td valign="top"><div align="center">

<select name="agregado1" class="dayOfWeek" id="agregado1" onchange="calcularTotalParcial(1)">

<option value="0">Ninguno</option>

<option value="100">Ají Verde</option>

<option value="100">Mayonesa</option>

<option value="300">Huevo</option>

<option value="400">Cebolla</option>

<option value="500">Americana</option>

<option value="500">Chucrut</option>

<option value="500">Lechuga</option>

<option value="500">Palta</option>

<option value="500">Poroto Verde</option>

<option value="500">Tocino</option>

<option value="600">Queso</option>

</select>

</div></td>

<td valign="top"><div align="center">

<select name="agregado2" class="dayOfWeek" id="agregado2" onchange="calcularTotalParcial(1)">

<option value="0">Ninguno</option>

<option value="100">Ají Verde</option>

<option value="100">Mayonesa</option>

<option value="300">Huevo</option>

<option value="400">Cebolla</option>

<option value="500">Americana</option>

<option value="500">Chucrut</option>

<option value="500">Lechuga</option>

<option value="500">Palta</option>

<option value="500">Poroto Verde</option>

<option value="500">Tocino</option>

<option value="600">Queso</option>

</select>

</div></td>

<td valign="top"><div align="center">

<select name="agregado3" class="dayOfWeek" id="agregado3" onchange="calcularTotalParcial(1)">

<option value="0">Ninguno</option>

<option value="100">Ají Verde</option>

<option value="100">Mayonesa</option>

<option value="300">Huevo</option>

<option value="400">Cebolla</option>

<option value="500">Americana</option>

<option value="500">Chucrut</option>

<option value="500">Lechuga</option>

<option value="500">Palta</option>

<option value="500">Poroto Verde</option>

<option value="500">Tocino</option>

<option value="600">Queso</option>

</select>

</div></td>

<td width="59" valign="top"><input name="total" type="text" disabled="disabled" class="dayOfWeek" id="total2" value="0" size="10"/> </td>

</tr>

<tr>

<td><input type="text" name="totaltotal" id="totaltotal" value="" size="10" disabled /></td>

</tr>

</table>

</form>

</body>

</html>

 

 

 

Lo que agregué:

 

1º Faltó el </form>

2º Agregué la función calcularTotal

function calcularTotal(){
document.getElementById('totaltotal').value = parseInt(document.getElementById('total1').value) + parseInt(document.getElementById('total2').value);
}

3º Inicialicé los valores para que no aparezca NaN... puedes hacer un validador mejor...

...
<input name="cantidad" type="text" class="dayOfWeek" onchange="calcularTotalParcial(0)" value="0" size="5"/>
...
<input name="total" type="text" disabled="disabled" class="dayOfWeek" id="total1" value="0" size="10"/>
...
<input name="cantidad" type="text" class="dayOfWeek" onchange="calcularTotalParcial(1)" value="0" size="5"/>
...
<input name="total" type="text" disabled="disabled" class="dayOfWeek" id="total2" value="0" size="10"/>
...

4º Agregué además un input adicional, para mostrar el total global...

<tr>
<td><input type="text" name="totaltotal" id="totaltotal" value="" size="10" disabled /></td>
</tr>

 

Tú, ordénalo como quieras... me refiero al <tr><td> que agregué...

 

SAlu2.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...