Tema: Como Sumar Datos con Javascript en campos dinamicos?????
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/11/2010, 18:12
Avatar de wladtepes
wladtepes
 
Fecha de Ingreso: febrero-2008
Mensajes: 140
Antigüedad: 17 años
Puntos: 0
Exclamación Como Sumar Datos con Javascript en campos dinamicos?????
hola bueno tengo una clase que genera cajas de texto dinamicamente en javascript (encontre el ejemplo en la web y lo modifique segun mis necesidades) y estos campos son guardados en la BBDD , pero necesito que ademas de generar estos campos dinamicos necesito realizar un calculo entre los digitos que se ingresen en los dos primeras cajas de texto y que el resultado quede en la tercera caja de texto, trate de hacer algo pero no me funciono

Código Javascript: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin título</title>
  6. <script>
  7. var contLin = 1, tr, td, tabla;
  8.  
  9. function calcular(ID){
  10. uno =document.getElementById('AL'+ID).rows[ID].cells[ID].childNodes[0].value;
  11. dos =document.getElementById('AN'+ID).rows[ID].cells[ID].childNodes[0].value;
  12. alert(uno+'  '+dos);
  13. //dos = document.getElementById('AN'+ID+'');
  14. //document.autoSumForm.Total.value = (uno * 1) + (dos * 1);
  15. }
  16.  
  17. function agregar() {
  18.     //alert (contLin);
  19.     document.getElementById("OcultoContLin").value = contLin;
  20.     //var 
  21.     tabla = document.getElementById('TablaMed');
  22.     tr = tabla.insertRow(tabla.rows.length);
  23.     
  24.     
  25.     td = tr.insertCell(tr.cells.length);
  26.     td.innerHTML =  contLin;
  27.     
  28.     
  29.     td = tr.insertCell(tr.cells.length);
  30.     td.innerHTML =  "<input type='text' size='10' name='AL"+contLin+"' id='AL"+contLin+"' value='AL" + contLin +"'>";
  31.     //alert (document.getElementById(td.innerHTML).id);
  32.     td = tr.insertCell(tr.cells.length);
  33.     td.innerHTML = "<input type='text' size='10' name='AN"+ contLin+"' id='AN"+ contLin +"' value='AN" + contLin +"'>";
  34.     
  35.     
  36.     td = tr.insertCell(tr.cells.length);
  37.     td.innerHTML = "<input type='text' size='10' name='VA"+contLin+"' id='VA"+contLin+"' value='VA" + contLin +"'>";
  38.     
  39.     td = tr.insertCell(tr.cells.length);
  40.     td.innerHTML = "<input type='button' name='B"+contLin+"' id='B"+contLin+"' value='CALCULAR' onClick='calcular("+contLin+")' >";
  41.     
  42.  
  43.     /*
  44.     td = tr.insertCell(tr.cells.length);
  45.     td.innerHTML = "<textarea cols='15' rows='1' id='t" + contLin + "4'>t" + contLin + "4";
  46.     */
  47.     contLin++;
  48.     
  49. }
  50.  
  51. function eliminarultima() {
  52.     ultima = document.getElementById('TablaMed').rows.length - 1;
  53.     
  54.     if(ultima > 0){
  55.         document.getElementById('TablaMed').deleteRow(ultima);
  56.         contLin--;
  57.         document.getElementById("OcultoContLin").value = contLin-1;
  58.         }
  59. }
  60.  
  61. function datosTextos() { 
  62. var textos = ''; 
  63. for (var i=1;i<document.getElementById('TablaMed').rows.length;i++){ 
  64.     for (var j=0;j<4;j++){ 
  65.         if (j==3){
  66.             textos = textos + document.getElementById('TablaMed').rows[i].cells[j].childNodes[0].value;
  67.         
  68.         }else{
  69.         textos = textos + document.getElementById('TablaMed').rows[i].cells[j].childNodes[0].value + '-';
  70.         }
  71.     }
  72. textos = textos + '/';
  73. }
  74. alert(textos);
  75. document.getElementById("OcultoDatoTabla").value = textos;
  76. }
  77.  
  78. </script>
  79.  
  80. <style type="text/css">
  81. <!--
  82. .Estilo1 {font-size: 12px}
  83. .TEXTO {    font-family: Arial, Helvetica, sans-serif;
  84.     font-size: 12px;
  85.     font-style: normal;
  86.     line-height: normal;
  87.     font-weight: normal;
  88.     font-variant: normal;
  89.     text-transform: none;
  90.     color: #FFFFFF;
  91. }
  92. -->
  93. </style>
  94. </head>
  95.  
  96. <body>
  97. <form id="form1" name="form1" method="get" action="index.php">
  98.  
  99. <table>
  100.   <tr>
  101.   <td>
  102.                                         <select name="tipo" size="1" id="tipo">
  103.                                           <option value="*">Seleccione tipo</option>
  104.                                           <option value="lamina_1">lamina_1</option>
  105.                                           <option value="lamina_2">lamina_2</option>
  106.                                           <option value="lamina_3">lamina_3</option>
  107.                                           <option value="lamina_4">lamina_4</option>
  108.                                           <option value="lamina_5">lamina_5</option>
  109.                                         </select>  
  110.   </td>
  111.   </tr>
  112.   </table>
  113.   
  114. <p>
  115.     <input name="AgregaMed" type="button" id="AgregaMed" value="+" onclick="agregar()" />
  116.     <input name="EliminarMed" type="button" id="EliminarMed" value="-" onclick="eliminarultima()" />
  117.     <input name="OcultoContLin"  id="OcultoContLin"  type="hidden" />
  118.      <input name="OcultoDatoTabla" id="OcultoDatoTabla"  type="hidden" />
  119.     <input name="cadena" type="submit" id="cadena" value="cadena" onclick="datosTextos()" />
  120.     
  121.   </p>
  122.  
  123.   <table   id="TablaMed">
  124.  
  125.     <tr class="Estilo1">
  126.     <td>VENTANA</td>
  127.       <td>ALTO</td>
  128.       <td>ANCHO</td>
  129.       <td >VALOR</td>
  130.           <td ></td>
  131.       </tr>
  132.   </table>
  133.   
  134. </form>
  135. </body>
  136. </html>
  137.  
  138. <?php 
  139. $cadena = $_GET['OcultoDatoTabla'];
  140. $partes = explode("/",$cadena); // divide una cadena segun separador
  141. array_pop($partes); // elimina el ultimo elemento del array
  142. for($i=0;$i<=(count($partes)-1);$i++){
  143. $subpartes = explode("-",($partes[$i])); 
  144. /* CONEXION PARA LA TABLA DE MEDICAMENTOS */
  145. $conexion4 = mysql_connect("localhost", "root", "");
  146. mysql_select_db("veterinaria", $conexion4);
  147. $consulta4= "insert into medicamentos values ('$subpartes[1]', '$subpartes[2]', '$subpartes[3]')";
  148. mysql_query($consulta4, $conexion4);
  149. }
  150.  
  151.  
  152. ?>



de antemano gracias por la ayuda