Tema: Formulario en javascript
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 30/11/2015, 11:18
Giankaa
 
Fecha de Ingreso: julio-2015
Mensajes: 20
Antigüedad: 8 años, 9 meses
Puntos: 0
Pregunta Formulario en javascript
Hola saludos, tengo un problema con un ejercicio... No he podido redactarlo para que me funcione como quiero y es que miren el código...
HTML:
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Trabajo Final</title>
  5.     <meta charset="utf-8">
  6.     <script type="text/javascript" src="../js/javascript.js"></script>
  7.     <link rel="stylesheet" type="text/css" href="../css/estilos.css">
  8.  
  9. </head>
  10. <body>
  11.  
  12. <form id="contacto-frm" name="contacto_frm" action="" method="get" enctype="application/x-www-form-urlencoded">
  13.    <img src="imagen.jpg">
  14.         <table name="tablauno" sTYLE="table-layout:fixed">
  15.  
  16.         <tr>
  17.         <td >
  18.         <label for="lecturaactual">Lectura Actual  : </label>
  19.         <input type="number" id="lecturaactual" name="lecturaactual_numb">
  20.         </td>
  21.  
  22.         <td>
  23.         <p>Consumo m3</p>
  24.  
  25.         <div id="consumo">0</div>
  26.         </td>
  27.         </tr>
  28.  
  29.         <tr>
  30.         <td > 
  31.         <label for="lecturaanterior">Lectura Anterior: </label>
  32.         <input type="number" id="lecturaanterior" name="lecturaanterior_numb">
  33.         </td>
  34.  
  35.         <td>
  36.         <p align="center">Subsidio</p>
  37.         </td>
  38.         <td>
  39.         <p align="center">Contribución</p>
  40.         </td>
  41.         </tr>
  42.  
  43.         <tr>
  44.           <td >
  45.         <label for="estrato">Estrato </label>
  46.         <select class="estilo" id="estrato" name="estrato">
  47.           <option value="1">1</option>
  48.           <option value="2">2</option>
  49.           <option value="3">3</option>
  50.           <option value="4">4</option>
  51.           <option value="5">5</option>
  52.         </select>
  53.           </td>
  54.  
  55.         <td >
  56.         <div id="subsidio">0</div>
  57.         </td>
  58.  
  59.         <td >
  60.         <div id="contribucion">0</div>
  61.         </td>
  62.  
  63.         </tr>
  64. <tr>
  65.   <td>
  66.     <input type="reset" id="agretabla" class="boton" name="agretabla_btn" value="Agregar a tabla +" >
  67.   </td>
  68.   <td>Valor Subtotal:</td>
  69.  
  70.   <td>
  71.   
  72.     <div id="subt">0</div>
  73.   </td>
  74.  
  75.   <td>
  76.     <input type="button" id="calcular" class="boton" name="calcular_btn" value="Calcular" >
  77.   </td>
  78.   
  79.  
  80. </tr>
  81.  
  82.         </table>
  83.         <table>
  84.           <tr>
  85.             <th>Estrato</th>
  86.             <th>Consumo</th>
  87.             <th>Subsidio/Contribución</th>
  88.             <th>Subtotal</th>
  89.           </tr>
  90.           <tr>
  91.             <td id="alm1">0</td>
  92.             <td id="alm2">0</td>
  93.             <td id="alm3">0</td>
  94.             <td id="alm4">0</td>
  95.           </tr>
  96.  
  97.         </table>
  98.  
  99.    </form>
  100. </body>
  101. </html>

El código Javascript:
Código Javascript: 
Ver original
  1. function subtotal(){
  2.     //alert("Calculando");
  3.     var verificar=true;
  4.     var estrato=document.getElementById("estrato");
  5.     var formulario=document.getElementById("contacto_frm");
  6.     var lecturaactual=document.getElementById("lecturaactual");
  7.     var lecturaanterior=document.getElementById("lecturaanterior");
  8.     var consumo=document.getElementById("consumo");
  9.     var subto=document.getElementById("subt");
  10.     var subsidio=document.getElementById("subsidio");
  11.     var contribucion=document.getElementById("contribucion");
  12.     var resultado;
  13.     if (lecturaactual.value=="") {
  14.         alert("El campo lectura actual es requerido");
  15.         lecturaactual.focus();
  16.         verificar=false;
  17.     }else if (lecturaanterior.value=="") {
  18.         alert("El campo lectura anterior es requerido");
  19.         lecturaanterior.focus();
  20.         verificar=false;
  21.     }
  22.     if (verificar==true) {
  23.         resultado=lecturaactual.value-lecturaanterior.value;
  24.         if (resultado<0) {
  25.             alert("El valor de Lecura Anterior debe ser inferior al valor de Lecura Actual");
  26.             lecturaanterior.focus();
  27.             return 0;
  28.         }else if(resultado=>1){
  29.         document.getElementById("consumo").innerHTML=resultado;
  30.         }
  31.     if      (estrato.value==1) {
  32.             subto=resultado*200;
  33.             document.getElementById("subt").innerHTML=subto;
  34.             subsidio=subto*10/100;
  35.             contribucion=0;
  36.             document.getElementById("subsidio").innerHTML=subsidio;
  37.             document.getElementById("contribucion").innerHTML=contribucion;
  38.     }else if (estrato.value==2) {
  39.             subto=resultado*400;
  40.             document.getElementById("subt").innerHTML=subto;
  41.             subsidio=subto*10/100;
  42.             contribucion=0;
  43.             document.getElementById("subsidio").innerHTML=subsidio;
  44.             document.getElementById("contribucion").innerHTML=contribucion;
  45.     }else if (estrato.value==3) {
  46.             subto=resultado*600;
  47.             document.getElementById("subt").innerHTML=subto;
  48.             contribucion=0;
  49.             subsidio=0;
  50.             document.getElementById("subsidio").innerHTML=subsidio;
  51.             document.getElementById("contribucion").innerHTML=contribucion;
  52.     }else if (estrato.value==4) {
  53.             subto=resultado*800;
  54.             document.getElementById("subt").innerHTML=subto;
  55.             subsidio=0;
  56.             contribucion=subto*20/100;
  57.             document.getElementById("subsidio").innerHTML=subsidio;
  58.             document.getElementById("contribucion").innerHTML=contribucion;
  59.     }else if (estrato.value==5) {
  60.             subto=resultado*1000;
  61.             document.getElementById("subt").innerHTML=subto;
  62.             subsidio=0;
  63.             contribucion=subto*20/100;
  64.             document.getElementById("subsidio").innerHTML=subsidio;
  65.             document.getElementById("contribucion").innerHTML=contribucion;
  66.     }
  67.         alert("Se calculó el valor subtotal");
  68.  
  69.     }
  70.  
  71. }
  72. function agregartabla(){
  73.     var estrato=document.getElementById("estrato");
  74.     var formulario=document.getElementById("contacto_frm");
  75.     var lecturaactual=document.getElementById("lecturaactual");
  76.     var lecturaanterior=document.getElementById("lecturaanterior");
  77.     var consumo=document.getElementById("consumo");
  78.     var subto=document.getElementById("subt");
  79.     var subsidio=document.getElementById("subsidio");
  80.     var contribucion=document.getElementById("contribucion");
  81.     var resultado;
  82.  
  83.     document.getElementById("alm1").innerHTML=estrato.value;
  84.     resultado=lecturaactual.value-lecturaanterior.value;
  85.     if(resultado=>1){
  86.         document.getElementById("alm2").innerHTML=resultado;
  87.         }
  88.         if  (estrato.value==1) {
  89.             subto=resultado*200;
  90.             document.getElementById("alm4").innerHTML=subto;
  91.             subsidio=subto*10/100;
  92.             document.getElementById("alm3").innerHTML=subsidio;
  93.     }else if (estrato.value==2) {
  94.             subto=resultado*400;
  95.             document.getElementById("alm4").innerHTML=subto;
  96.             subsidio=subto*10/100;
  97.             document.getElementById("alm3").innerHTML=subsidio;
  98.     }else if (estrato.value==3) {
  99.             subto=resultado*600;
  100.             document.getElementById("alm4").innerHTML=subto;
  101.             contribucion=0;
  102.             subsidio=0;
  103.             document.getElementById("alm3").innerHTML=subsidio;
  104.             document.getElementById("alm3").innerHTML=contribucion;
  105.     }else if (estrato.value==4) {
  106.             subto=resultado*800;
  107.             document.getElementById("alm4").innerHTML=subto;
  108.             contribucion=subto*20/100;
  109.             document.getElementById("alm3").innerHTML=contribucion;
  110.     }else if (estrato.value==5) {
  111.             subto=resultado*1000;
  112.             document.getElementById("alm4").innerHTML=subto;
  113.             contribucion=subto*20/100;
  114.             document.getElementById("alm3").innerHTML=contribucion;
  115.     }
  116.         alert("Se agregó una tabla");
  117.         document.getElementById("consumo").innerHTML=0;
  118.         document.getElementById("subsidio").innerHTML=0;
  119.         document.getElementById("contribucion").innerHTML=0;
  120.         document.getElementById("subt").innerHTML=0;
  121.         
  122.     }
  123.  
  124. window.onload=function(){
  125.     var botontabla, botonsubtotal;
  126.     botonsubtotal=document.contacto_frm.calcular_btn;
  127.     botonsubtotal.onclick=subtotal;
  128.     botontabla=document.contacto_frm.agretabla_btn;
  129.     botontabla.onclick=agregartabla;
  130.  
  131. }

Y el código css:

Código CSS: 
Ver original
  1. *
  2. {
  3.     border:0;
  4.     margin: 0;
  5.     padding: 0;
  6. }
  7. body{
  8.     background:lavender;
  9.     font-family: Helvetica;
  10.     font-size: 16px
  11.     text-align:center;
  12. }
  13. div{
  14.     background:#DDD;
  15.     border: thin solid skyblue;
  16.     border-radius: 1em;
  17.     font-size: 1em;
  18.     padding: .25em;
  19. }
  20. form{
  21.     margin: .5em auto;
  22.     width: 50%;
  23. }
  24. input[type=button]
  25. {
  26.     background:#f60;
  27.     border: thin solid transparent;
  28.     border-radius: .5em;
  29.     color: #000;
  30.     cursor: pointer;
  31.     font-size: 1em;
  32.     padding: .5em;
  33. }
  34. input[type=button]:hover
  35. {
  36.     background:skyblue;
  37.     border:thin-solid: #f60;
  38.     border-radius: .3em;
  39.     color: #f60;
  40. }
  41. input[type=reset]
  42. {
  43.     background:#f60;
  44.     border: thin solid transparent;
  45.     border-radius: .5em;
  46.     color: #000;
  47.     cursor: pointer;
  48.     font-size: 1em;
  49.     padding: .5em;
  50. }
  51. input[type=reset]:hover
  52. {
  53.     background:skyblue;
  54.     border:thin-solid: #f60;
  55.     border-radius: .3em;
  56.     color: #f60;
  57. }
  58. input[type="number"]
  59. {
  60.     background:#DDD;
  61.     border: thin solid skyblue;
  62.     border-radius: 1em;
  63.     font-size: 1em;
  64.     padding: .25em;
  65. }
  66. input[type="radio"],label
  67. {
  68.     cursor: pointer;
  69. }
  70.  
  71. table{
  72.     border-spacing: 10px;
  73.     background:#fff;
  74.     border:.thin solid solid skyblue;
  75.     border-radius: 1em;
  76.     padding: 1em;
  77. }
  78. .label1 {
  79.   display: block;
  80.   margin: .5em 0 0 0;
  81. }
  82. .boton{
  83.     -ms-transition: all 1s ease-in-out;
  84.     -moz-transition: all 1s ease-in-out;
  85.     -o-transition: all 1s ease-in-out;
  86.     -webkit-transition: all 1s ease-in-out;
  87.     transition: all 1s ease-in-out;
  88. }
  89. .estilo
  90. {
  91.     background:#DDD;
  92.     border: thin solid skyblue;
  93.     border-radius: 1em;
  94.     font-size: 1em;
  95.     padding: .25em;
  96. }


Si miran al ejecutar el html, tiene las opciones de "Calcular" y "Agregar tabla +"
Una vez doy clic en Calcular, se generan las operaciones y eso...
Cuando doy clic en Agregar tabla +, quiero que en la parte de abajo se agreguen los valores como está desarrollado y las casillas de arriba se pongan en blanco o ceros, (eso está hecho)...
Lo que necesito es que al calcular otros valores y pulsar nuevamente en Agregar tabla +, se añada una nueva línea debajo de la que ya está generada y así sucesivamente, cuantas veces sea necesario...
Agradezco y espero su pronta ayuda porfavor!!