[SOLUCIONADO] Calcular la suma de dos campos de texto sin boton

jonny03 · #1 (**permalink**) 10/07/2013, 09:44

Buenas a todos, disculpen, tengo este código y quisiera que me ayudaran a acerles siertas modificaciones:

Código HTML:

<html>
<head>
<title>Calculador de productos</title>
<script>
function cambia1(form1){
if(document.form1.dis[0].selected == true){
document.form1.cos_dis.value="0";
}
if(document.form1.dis[1].selected == true){
document.form1.cos_dis.value="5";
}
if(document.form1.dis[2].selected == true){
document.form1.cos_dis.value="10";
}
}
function cambia2(form1){
if(document.form1.pap[0].selected == true){
document.form1.cos_pap.value="0";
}
if(document.form1.pap[1].selected == true){
document.form1.cos_pap.value="2";
}
if(document.form1.pap[2].selected == true){
document.form1.cos_pap.value="7";
}
if(document.form1.pap[3].selected == true){
document.form1.cos_pap.value="2";
}
}
</script>
</head>

<body><form id="form1" name="form1" method="post" action="">
<table width="501" border="2">
  <tr>
    <th width="126" rowspan="2" scope="col">&nbsp;</th>
    <th width="131" scope="col">Discos</th>
    <th width="120" scope="col">Papelería</th>
  </tr>
  <tr>
    <td><center>
      <select name="dis" id="dis" onchange="cambia1()">
  <option value="0">Ninguno</option>
  <option value="5">CD</option>
  <option value="10">DVD</option>
      </select></center></td>
    <td><center>
        <select name="pap" id="pap"onchange="cambia2()">
<option value="0">Ninguno</option>
<option value="2">Lápiz</option>
<option value="7">Pluma</option>
<option value="2">Borrador</option>
        </select>
    </center></td>
    <td width="94"><div align="center"><strong>Total:</strong></div></td>
  </tr>
  <tr>
    <td height="26"><strong>Costo:</strong></td>
    <td>
      $
      <input name="cos_dis" type="text" disabled="disabled" id="cos_dis" value="0" size="3" />
    </td>
    <td>
      $
      <input name="cos_pap" type="text" disabled="disabled" id="cos_pap" value="0" size="3" />
    </td>
    <td>
      $
      <input name="total_cos" type="text" disabled="disabled" id="total_cos" value="0" size="5" />
</td>
  </tr>
</table></form>
</body>
</html>

Lo que quiero es que en la casilla de "Total_cos" aparezca la suma de la cantidad que aparezca en "cos_dis" y en "cos_pap" pero sin la necesidad de presionar un botón, quiero que salga automáticamente como en los otros dos.
Pienso que con javascript lo puedo lograr, pero busco ayuda haver si me dicen por donde comenzar

jonny03 · #2 (**permalink**) 10/07/2013, 10:50

Parece que ya e logrado hacerlo funcionar yo solo
me quedo algo así:

Código HTML:

<html>
<head>
<title>Calculador de productos</title>
<script>
function cambia1(form1){
if(document.form1.dis[0].selected == true){
document.form1.cos_dis.value="0";
}
if(document.form1.dis[1].selected == true){
document.form1.cos_dis.value="5";
}
if(document.form1.dis[2].selected == true){
document.form1.cos_dis.value="10";
}
}
function cambia2(form1){
if(document.form1.pap[0].selected == true){
document.form1.cos_pap.value="0";
}
if(document.form1.pap[1].selected == true){
document.form1.cos_pap.value="2";
}
if(document.form1.pap[2].selected == true){
document.form1.cos_pap.value="7";
}
if(document.form1.pap[3].selected == true){
document.form1.cos_pap.value="2";
}
}
</script>
</head>

<body><form id="form1" name="form1" method="post" action="">
<table width="414" border="2">
  <tr>
    <th width="90" rowspan="2" scope="col">&nbsp;</th>
    <th width="82" scope="col">Discos</th>
    <th width="86" scope="col">Papeleria</th>
  </tr>
  <tr>
    <td><center>
      <select name="dis" id="dis" onchange="cambia1(), calcula('+')">
  <option value="0">Ninguno</option>
  <option value="5">CD</option>
  <option value="10">DVD</option>
      </select></center></td>
    <td><center>
        <select name="pap" id="pap"onchange="cambia2(), calcula('+')">
<option value="0">Ninguno</option>
<option value="2">Lapiz</option>
<option value="7">Pluma</option>
<option value="2">Borrador</option>
        </select>
    </center></td>
    <td width="126"><div align="center"><strong>Total:</strong></div></td>
  </tr>
  <tr>
    <td height="26"><strong>Costo:</strong></td>
    <td>
      $
      <input name="cos_dis" type="text" id="cos_dis" value="0" size="3" readonly/>
    </td>
    <td>
      $
      <input name="cos_pap" type="text" id="cos_pap" value="0" size="3" readonly contenteditable="false"/>
    </td>
    <td>
      $
      <input name="total_cos" type="text" id="total_cos" value="0" size="5" readonly/>
</td>
  </tr>
</table></form>
<script language="javascript">  
function calcula(operacion){  
    var dis = document.form1.cos_dis.value; 
    var pap = document.form1.cos_pap.value; 
    var result = eval(dis + operacion + pap); 
    document.form1.total_cos.value = result ; 
}
</script>
</body>
</html>

Gracias de cualquier forma a cualquiera que me haya querido ayudar