Como crear un formulario web para realizar cálculos

Escrito por allen bethea Google | Traducido por john font
Como crear un formulario web para realizar cálculos

JavaScript permite realizar cálculos con los datos de un formulario web.

Digital Vision./Digital Vision/Getty Images

JavaScript es un lenguaje que incorpora funciones para proporcionar información instantánea a los visitantes de un sitio. Puedes acceder a la estructura del documento de un formulario con el lenguaje de marcación de hipertexto HTML (por sus siglas en inglés) a través de accesos, utilizando el modelo de objetos de Documento o DOM. La función de JavaScript getElementById () permite extraer los datos introducidos en un formulario. Estos datos pueden ser procesados ​​y enviados de vuelta al formulario DOM, con la propiedad "innerHTML" o directamente en un elemento del formulario utilizando getElementById () de nuevo. Puedes llamar a una función JavaScript para procesar los datos en un campo de formulario HTML específico mediante la adición de un evento "onchange ()" en el elemento de un formulario.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Necesitarás

  • Internet Explorer es un navegador web mientras que el bloc de notas es un editor de texto plano.

Lista completaMinimizar

Instrucciones

  1. 1

    Haz clic en el botón "Inicio", después en "Todos los programas", posteriormente en "Accesorios" del menú y finalmente en "Bloc de notas" para iniciar el editor de texto.

  2. 2

    Escribe el siguiente código en el editor de texto. También puedes seleccionar el código con el ratón, presionando "Control-c" y luego presionando "Control-v" para pegar el código en el editor. <html> <head> <script type="text/javascript"> function calculateTax() { // variable declarations var TaxRate=0.065; var Tax=0; var subTotal=0; // Get info from form var Quantity=Number(document.getElementById("quantity").value); var Price=Number(document.getElementById("choice").value); // Initial Calculations Tax=Quantity*TaxRate*Price; subTotal=Quantity*Price; //enviar la información al formulario document.getElementById('subtotal').innerHTML = "Subtotal is: "+subTotal; document.getElementById('tax').innerHTML = "Tax is: "+Tax; subTotal=subTotal+Tax; document.getElementById('total').innerHTML = "Total is: "+subTotal; alert("Check your Total"); } </script> </head> <body> <h1>Computing on the Go</h1> <form> Choose Device: <select id="choice" > <option value="">Select Device</option> <option value="100">Netbook $100.00</option> <option value="300">Smart Phone $300.00</option> <option value="400">Tablet PC $400</option> </select> ¿Cuántas quieres?<input id="quantity" type="text" name="quantity" onchange="calculateTax()" /> <div id="subtotal">Subtotal: </div> <div id="tax">Tax: </div> <div id="total">Total: </div> <input type="submit" value="Submit" /> </form> </body> </html>

  3. 3

    Haz clic en la opción del menú "Archivo". Selecciona la opción "Guardar". Guárdalo con el nombre del archivo "test.html".

  4. 4

    Haz clic en el botón "Inicio" y haz clic en "Todos los programas". Después haz clic en "Internet Explorer". Posteriormente haz clic en el menú "Archivo" y finalmente selecciona "Abrir archivo".

  5. 5

    Ubica el archivo "test.html" que acabas de crear, selecciónalo con el ratón y haciendo clic en "Abrir". Haz clic en el botón "Seleccionar dispositivo" y selecciona un dispositivo. Introduce una cantidad en la casilla "¿cuantos deseas?" a continuación, haz clic en el botón "Enviar". Finalmente, el guión debe calcular el precio y calcular el impuesto.

Consejos y advertencias

  • Utiliza IDs descriptivas con "nombres" cortos en todos los elementos de formulario HTML. Esto hace que sea más fácil escribir código JavaScript que se identifique correctamente, accede y manipula los datos dentro de ese elemento. Los CGI o guiones del servidor extraen los datos del formulario web utilizando el nombre de un elemento del mismo. Escoge muy bien los nombres ya que ésto hace que sea más fácil de depurar el guión CGI y corregir todos los errores dentro del formulario.
  • Las cajas de alerta pueden parecer molestas ventanas emergentes que surgen de visitantes externos. El uso de JavaScript y HTML con la propiedad "innerHTML" puede reemplazar el uso de las cajas de alerta. Con "innerHTML", puedes colocar la información en el formulario o en cualquier otro lugar de la página web. Además, con "innerHTML" puedes utilizar estilos como cualquier elemento HTML. Por ejemplo, se podría sustituir el guión de la alerta con "document.getElementById ('MyALERT') innerHTML =" Revisa el total";. A continuación, puedes etiquetar un div, un párrafo o un encabezado en cualquier lugar dentro de tu página web con el id "MyALERT".

No dejes de leer...

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles

Copyright © 1999-2015 Demand Media, Inc. Acerca de

El uso de este sitio constituye la aceptación de los términos y política de privacidad de eHow. Ad Choices es-US

Demand Media