Foros del Web » Programando para Internet » Javascript »

Formulario en javascript

 Estas en el tema de Formulario en javascript en el foro de Javascript en Foros del Web. 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: ...
  #1 (permalink)  
Antiguo 30/11/2015, 11:18
 
Fecha de Ingreso: julio-2015
Mensajes: 20
Antigüedad: 8 años, 8 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!!

Etiquetas: innerhtml, tablas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 23:22.