0

Código javascript

 function mostrar(){
var rut= document.getElementById("rut").value;
var nombre=document.getElementById("nombre").value;
var LAnterior=document.getElementById("LAnterior").value;
var direccion=document.getElementById("direccion").value;
var LActual=document.getElementById("LActual").value;
var comuna=document.getElementById("comuna").value;
var lista = document.getElementById("tipificacion");
var valor = lista.options[lista.selectedIndex].text;
tipificacion(valor);
     }


function tipificacion(valorSeleccionado){
    var ConsumoAnterior;
    var FechaPago;
    var MesPago;


    if (valorSeleccionado == "1a")
    {
    ConsumoAnterior=2;
   FechaPago="15-03-11"
     MesPago=3;
     document.getElementById('c').innerHTML = "Mes de pago:"+MesPago;
    }
   else if (valorSeleccionado =="1d" ){

     ConsumoAnterior=200;
     FechaPago="22-04-11"
      MesPago=4;
    }
    else if (valorSeleccionado =="1c"){
        ConsumoAnterior=5;
        FechaPago="29-05-11"
         MesPago=5;

    }else{
        alert("No a Ingresado tipificacion!")
    }


  } 

codigo html

    <!DOCTYPE html>
  <html>
     <head>
    <title></title>
    <meta charset="UTF-8">


    <script type="text/javascript" src="1.js"></script>    
    </head>
    <body>
    <form >


<table>
    <h2>Boleta Chilectra</h2>
    <tbody>
         <tr>
             <td>Rut</td>
             <td> <input type="text" name="rut" id="rut" value="" required>  
            </td>
             <td>Tipificacion</td>
             <td>
                  <select name="tipificacion" id="tipificacion" required>
                  <option value="1a">1a</option>
                  <option value="1d">1d</option>
                  <option value="1c">1c</option>
                   </select>  
             </td>
         </tr>
         <tr>
              <td>Nombre Cliente</td>
              <td> <input type="text" name="nombre" id="nombre" value="" 
                required>  </td>
              <td>Lectura Anterior (KW)</td>
             <td> <input type="number" name="LAnterior" id="LAnterior"  
         min="50" required max="999999999999" > </td>
         </tr>   
         <tr>
                <td>Direccion</td>
                <td> <input type="text" name="direccion"  id="direccion" 
         required >  </td>
                <td>Lectura Actual(KW)</td>
               <td><input type="number" name="LActual" id="LActual"  
      required min="50" max="999999999999" > </td>
         </tr>   
         <tr>
                <td>Comuna</td>
                <td> <input type="text" name="comuna" id="comuna" value="" 
   required>  </td>
                <td>Lectura Actual(KW)</td>

         </tr>   


    </tbody>
   </table>

 <input type="submit" onclick="mostrar()" value="Enviar">


 <section id="Detalle boleta">
  <h2>Detalle Boleta</h2>
  <div id=contenerdor>

 </div>
  <table>
    <tbody>
        <tr>
            <td>Fecha de pago:</td>
            <td></td>
        </tr>
        <tr>
            <td>Valor UF a la fecha:</td>
            <td></td>
        </tr>
    </tbody>
  </table>


 </section>
 <div id="c" name ="c"></div>
  <section id ="Consumo">
   <h2>Consumo de KW</h2>
    <table>
    <tbody>
        <tr>
            <td>Consumo Actual (KW):</td>

            <td id="consumoac"></td>
        </tr>
        <tr>
            <td>Consumo Anterior (KW):</td>
            <td></td>
        </tr>
    </tbody>
   </table>
      </section>
  <section id="Valor">
    <h2>Valor a Pagar</h2>
  Total: 
     </section>



   </form>
     </body>
      </html>

1 respuesta 1

0

 function mostrar() {
     var rut = document.querySelector("#rut"),
         nombre = document.querySelector("#nombre"),
         LAnterior = document.querySelector("#LAnterior"),
         direccion = document.querySelector("#direccion"),
         LActual = document.querySelector("#LActual"),
         comuna = document.querySelector("#comuna"),
         lista = document.querySelector("#tipificacion"),
         valor = lista.options[lista.selectedIndex].value;
     if (rut.value.length == 0) {
         alert('Debe rellenar el campo Rut.');
         rut.focus();
     } else if (nombre.value.length == 0) {
         alert('Debe rellenar el campo Nombre.');
         nombre.focus();
     } else if (direccion.value.length == 0) {
         alert('Debe rellenar el campo Direccion.');
         direccion.focus();
     } else if (comuna.value.length == 0) {
         alert('Debe rellenar el campo Comuna.');
         comuna.focus();
     } else if (LAnterior.value < 50 || LAnterior.value > 999999999999) {
         alert('Debe rellenar el campo Lectura Anterior.\nDebe ser entre 50 a 999999999999');
         LAnterior.focus();
     } else if (isNaN(LAnterior.value)) {
         alert('El campo Lectura Anterior solo acepta Numeros.');
         LAnterior.focus();
     } else if (LActual.value < 50 || LActual.value > 999999999999) {
         alert('Debe rellenar el campo Lectura Actual.\nDebe ser entre 50 a 999999999999');
         LActual.focus();
     } else {
         alert('Enviado Exitosamente');
         //ELIJE UNO U OTRO QUE ES LO QUE QUIERES HACER, SI MOSTRAR ABAJO CON LA FUNCION TIPIFICACION O ENVIARLO MEDIANTE GET POR EL FORMULARIO
         // nombre.closest('form').submit();
         //  tipificacion(valor);
     }
     // console.log(valor);
 }

 function tipificacion(valorSeleccionado) {
     var ConsumoAnterior, FechaPago, MesPago;
     if (valorSeleccionado == "1a") {
         ConsumoAnterior = 2;
         FechaPago = "15-03-11"
         MesPago = 3;
         document.querySelector('#c').innerHTML = "Mes de pago:" + MesPago;
     } else if (valorSeleccionado == "1d") {
         ConsumoAnterior = 200;
         FechaPago = "22-04-11"
         MesPago = 4;
     } else if (valorSeleccionado == "1c") {
         ConsumoAnterior = 5;
         FechaPago = "29-05-11"
         MesPago = 5;
     } else {
         alert("No a Ingresado tipificacion!")
     }
 }
<!DOCTYPE html>
<html>
    <head>
        <title>
        </title>
        <meta charset="utf-8">
            <script src="1.js" type="text/javascript">
            </script>
        </meta>
    </head>
    <body>
        <form>
            <table>
                <h2>
                    Boleta Chilectra
                </h2>
                <tbody>
                    <tr>
                        <td>
                            Rut
                        </td>
                        <td>
                            <input id="rut" name="rut" required="" type="text" value="">
                            </input>
                        </td>
                        <td>
                            Tipificacion
                        </td>
                        <td>
                            <select id="tipificacion" name="tipificacion" required="">
                                <option value="1a">
                                    1a
                                </option>
                                <option value="1d">
                                    1d
                                </option>
                                <option value="1c">
                                    1c
                                </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Nombre Cliente
                        </td>
                        <td>
                            <input id="nombre" name="nombre" required="" type="text" value="">
                            </input>
                        </td>
                        <td>
                            Lectura Anterior (KW)
                        </td>
                        <td>
                            <input id="LAnterior" max="999999999999" min="50" name="LAnterior" required="" type="number">
                            </input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Direccion
                        </td>
                        <td>
                            <input id="direccion" name="direccion" required="" type="text">
                            </input>
                        </td>
                        <td>
                            Lectura Actual(KW)
                        </td>
                        <td>
                            <input id="LActual" max="999999999999" min="50" name="LActual" required="" type="number">
                            </input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Comuna
                        </td>
                        <td>
                            <input id="comuna" name="comuna" required="" type="text" value="">
                            </input>
                        </td>
                        <td>
                            Lectura Actual(KW)
                        </td>
                    </tr>
                </tbody>
            </table>
            <input onclick="mostrar()" type="button" value="Enviar">
                <section id="Detalle boleta">
                    <h2>
                        Detalle Boleta
                    </h2>
                    <div id="contenerdor">
                    </div>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    Fecha de pago:
                                </td>
                                <td>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Valor UF a la fecha:
                                </td>
                                <td>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </section>
                <div id="c" name="c">
                </div>
                <section id="Consumo">
                    <h2>
                        Consumo de KW
                    </h2>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    Consumo Actual (KW):
                                </td>
                                <td id="consumoac">
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    Consumo Anterior (KW):
                                </td>
                                <td>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </section>
                <section id="Valor">
                    <h2>
                        Valor a Pagar
                    </h2>
                    Total:
                </section>
            </input>
        </form>
    </body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.