Cómo actualizar un valor de formulario sobre la marcha usando JavaScript

Escrito por rick leander | Traducido por enrique pereira vivas
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo actualizar un valor de formulario sobre la marcha usando JavaScript
Cómo actualizar un valor de formulario sobre la marcha usando JavaScript. (Photos.com/AbleStock.com/Getty Images)

Los modelos orientados a eventos de JavaScript permiten a los desarrolladores añadir actividad cuando el usuario haga algo en el navegador. Los desarrolladores principiantes aprenden rápidamente cómo manejar un clic del botón con el evento "onclick", pero también hay eventos para "onChange" para detectar cuando los valores del formulario cambian y "onBlur" para detectar cuando el cursor se mueve de un control a otro. Al utilizar el evento onChange para establecer otros valores de control del formulario, el formulario de la web puede ser actualizado dinámicamente. Practica la actualización de los valores del formulario mediante la construcción de un formulario web sencillo que calcule el precio total mediante la detección de cambios en la cantidad y el precio.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Necesitarás

  • Editor HTML

Lista completaMinimizar

Instrucciones

  1. 1

    Abre un editor de HTML y crea una nueva página web. Guárdala como "TestPage.html".

  2. 2

    Agrega un formulario a la página, a continuación, agregar tres cajas de texto. Colócale nombres a las cajas: "Cantidad", "Precio" y "Precio Total". Haz la caja de "Precio Total" que sea sólo de lectura. Dale a cada cuadro de texto los títulos de "Cantidad", "Precio unitario" y "Precio total", respectivamente.

  3. 3

    Añade eventos onChange de "Cantidad" y "Precio" para que llamen a la función "price_change". Cuando todos los controles estén agregados, el código del formulario queda redactado como sigue:

    <form id="form1"> Quantity: <input type="text" name="qty" id="qty" onChange='price_change()' /> <br/> Unit Price: <input type="text" name="price" id="price" onChange='price_change()' /> <br/> Total Price: <input type="text" name="totalPrice" id="totalPrice" readonly /> </form>

  4. 4

    Define la función JavaScript "price_change".

    <script language="javascript"> function price_change() {

  5. 5

    Define tres variables que apunten a los cuadros de entrada.

    var qty = document.getElementsByName("qty").item(0); var price = document.getElementsByName("price").item(0); var totalPrice = document.getElementsByName("totalPrice").item(0);

    Cada variable apunta a uno de los tres campos de entrada de texto. El método "getElementsByName" encuentra cualquier tipo de control que tenga el nombre solicitado y las guarda en una matriz. Al seleccionar "elemento (0)," la variable apunta a la primera (y única) aparición de este elemento en el formulario.

  6. 6

    Define tres variables más para contener los valores numéricos que figuran en los cuadros de texto.

    var q, p, t;

  7. 7

    Analiza cada uno de los cuadros de texto en valores de coma flotante, entonces multiplica los dos juntos para calcular el precio total. Pon este valor en la caja de entrada de texto "Precio Total" .

    q = parseFloat (qty.value); p = parseFloat (price.value); t = p * q; totalPrice.value = t.toString(); } </script>

    El método "toString" convierte el número de nuevo en una cadena de texto.

  8. 8

    Carga el archivo en Internet Explorer, Firefox u otro, y dale una oportunidad. A medida que cambian los valores, el precio total se recalcula. Si cualquiera de los cuadros de texto contiene un valor en blanco o no numérico, el precio total cambiará a NAN para indicar que este no es un número.

Consejos y advertencias

  • El código adicional debe añadirse para detectar cuando se intorduzcan valores no numéricos. Añade un "div" al final del formulario y establece tu propiedad "innerHTML" para poner mensajes de error en la página.

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