Cómo calcular los totales del formulario de pedido en JavaScript

Escrito por cathlene s. baptista | Traducido por cesar daniel gonzález ménez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo calcular los totales del formulario de pedido en JavaScript
Usa JavaScript para mantener un registro de los valores y ofrecer totales en las páginas Web. (Thinkstock/Comstock/Getty Images)

JavaScript es un lenguaje de programación utilizado para agregar una funcionalidad dinámica a las páginas Web. JavaScript se coloca directamente en el HTML de una página web y se utiliza para añadir interactividad, como comentarios de los usuarios y la validación de entrada, contrario a las páginas estáticas. JavaScript también interactúa directamente con elementos de una página Web, tales como campos de entrada y botones, por lo que se puede utilizar para actualizar sus atributos. JavaScript puede utilizarse, por ejemplo, para hacer un seguimiento de los valores introducidos por un usuario, sumarlos y ofrecer el total.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Necesitarás

  • Un explorador Web con JavaScript habilitado
  • Un editor de textos

Lista completaMinimizar

Instrucciones

    Calcular totales del formulario de pedido en JavaScript

  1. 1

    Abre un editor de texto y crea un archivo con una extensión .htm. Este archivo contendrá el formato (HTML) que define la forma y el contenido del formulario: dos campos en los que el usuario introduce los números, un botón para calcular un total basado en los dos números y un campo total que ocupa el total.

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

  2. 2

    Agrega tres campos de entrada en el formulario. Nombra a la primera entrada del campo como "box1", el nombre del segundo campo de entrada será "box2" y el nombre del tercer campo de entrada "total". Box1 tendrá el primer número, box2 el segundo número, y el total se sitúa en el campo total. Dales a los campos de entrada un tamaño de 3 y una longitud máxima de 3.

    <html> <head></head> <body><form> <input type=text size=3 maxlength=3 name="box1"> <input type=text size=3 maxlength=3 name="box2"> <input type=text size=3 maxlength=3 name="total"> </form></body> </html>

  3. 3

    Agrega un botón HTML al formulario. Al hacer clic, el botón pasa al formulario y sus elementos (this.form) a una función JavaScript llamada runTotal (). Llama la función con el evento onClick () y dale al botón un nombre usando el valor = el atributo.

    <html> <head></head> <body><form> <input type=text size=3 maxlength=3 name="box1"> <input type=text size=3 maxlength=3 name="box2"> <input type=text size=3 maxlength=3 name="total"> <input type="button" onClick="runTotal(this.form)" value="Calculate Running Total"> </form></body> </html>

  4. 4

    Agrega una función de JavaScript (runTotal ()) a la sección <head> de HTML entre las etiquetas de JavaScript <script> y </ script>. Esta función recibe los elementos del formulario, añade los valores de box1 y box2 y coloca el resultado en el campo de entrada total. Utiliza los diagonales (/ /) para indicar comentarios.

    <html> <head> <script language="javascript" type="text/javascript"> function runTotal(myForm) { //el código va aquí } </script> </head><body> <form> <input type=text size=3 maxlength=3 name="box1"> <input type=text size=3 maxlength=3 name="box2"> <input type=text size=3 maxlength=3 name="total"> <input type="button" onClick="runTotal(this.form)" value="Calculate Running Total"> </form></body> </html>

  5. 5

    Declara dos variables y asígnales los valores de box1 y box2. JavaScript utiliza el signo más (+) para concatenar cadenas, así que utiliza la función Number() para asegurarte de que JavaScript realice una suma al agregar los valores.

    <html> <head> <script language="javascript" type="text/javascript"> function runTotal(myForm) { //el código va aquí //declara las variables y asigna el box1y box2. var form_field1 = Number(myForm.box1.value); var form_field2 = Number(myForm.box2.value); } </script> </head> <body><form> <input type=text size=3 maxlength=3 name="box1"> <input type=text size=3 maxlength=3 name="box2"> <input type=text size=3 maxlength=3 name="total"> <input type="button" onClick="runTotal(this.form)" value="Calculate Running Total"> </form></body> </html>

  6. 6

    Agrega los dos valores variables y actualiza el campo total con el resultado.

    <html> <head> <script language="javascript" type="text/javascript"> function runTotal(myForm) { //el código va aquí //declara las variables y asigna box1 y box2. var form_field1 = Number(myForm.box1.value); var form_field2 = Number(myForm.box2.value); //add the variables and update the total field value with the result. myForm.total.value = form_field1 + form_field2; } </script> </head> <body><form> <input type=text size=3 maxlength=3 name="box1"> <input type=text size=3 maxlength=3 name="box2"> <input type=text size=3 maxlength=3 name="total"> <input type="button" onClick="runTotal(this.form)" value="Calculate Running Total"> </form></body> </html>

  7. 7

    Abre la página .htm en un navegador. Escribe un número en box1, un número en box2 y haz clic en el botón para agregar los números. El total aparecerá en el campo total.

Consejos y advertencias

  • Utiliza la opción "value = 0" con box1 y box2 para darles un valor inicial de 0 cuando se cargue la página.
  • Añade un poco de texto antes del campo total para separarlo de los otros campos de la página.
  • Este JavaScript añade dos valores para la simplificación. Utiliza un bucle y la matriz de valores para que el código sea más flexible.
  • Trata de usar el evento onChange () en box1 y box2 para calcular el total mientras los usuarios introducen valores.
  • Asegúrate de utilizar la función Number() para evitar la concatenación de los valores en box1 y box2. Por ejemplo, agregar 1 y 2 debería dar lugar a 3, no 12.
  • Si el usuario escribe un caracter en box1 o box2, el campo total será NaN o Not a Number (no es un número).

No dejes de ver

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