Formulario que multiplica números en JavaScript

20/Dic/2006 JavaScript , , 22 Comentarios

Una de las cosas para las que se ha usado JavaScript en los formularios HTML es para operar entre valores introducidos en los campos del formulario, por ejemplo para multiplicar valores. Aunque nos facilita una funcionalidad hace que por desgracia nos aparezca mucho código JavaScript. Y digo por desgracia ya que creo que no hay cosa más tediosa y complicada que el mantenimiento de JavaScript.

Sin ir más lejos este es uno de los principios en los que se apoya la especificación de XForms. Reducción del código JavaScript. Solo queda que algún día este implementada en los navegadores. Hasta entonces seguiremos usando JavaScript.

En el caso que hoy nos compete, la idea es facilitar al usuario una multiplicación de dos valores introducidos en un formulario. Es por ello que lo primero será el crear el formulario, el cual tendrá tres elementos input que reflejarán los valores del multiplicando, el multiplicador y el resultado:

  1. <form id="multiplicar">
  2. <input type="text" id="multiplicando" value=0> X
  3. <input type="text" id="multiplicador" value=0> =
  4. <input type="text" id="resultado">
  5. </form>

Por defecto hemos dado un valor de 0 a los campos. Aunque esto es opcional.

La idea es que cada vez que alguien modifique o bien el multiplicando o bien el multiplicador, el resultado cambie. Es por ello que tendremos que controlar el evento onChange sobre dichos campos. Este evento llamará a la función multiplicar, la cual codificaremos más adelante.

  1. <form id="multiplicar">
  2. <input type="text" id="multiplicando" value=0 onChange="multiplicar();"> X
  3. <input type="text" id="multiplicador" value=0 onChange="multiplicar();"> =
  4. <input type="text" id="resultado">
  5. </form>

La función multiplicar() será el código JavaScript que realice la multiplicación. Esta función la deberemos de poner en la cabecera de la página HTML.

  1. function multiplicar() {...}
  2. </script>
  3. </head>

Esta función, lo primero que hará sera ir a recuperar el valor de los elementos del formulario. Para ello nos apoyaremos en el DOM de los elementos de la página y en su función getElementById(identificador). El parámetro será el valor del atributo ID del elemento input.

Mucho cuidado con las mayúsculas y minúsculas de getElementById. Un pequeño error en esto hará quela función no funcione y nos volvamos locos buscando el error.

  1. m1 = document.getElementById("multiplicando").value;
  2. m2 = document.getElementById("multiplicador").value;

Esta función devolverá el elemento HTML en cuestión, es decir, el input. A si que habrá que acceder al valor del elemento con el .value.

Ahora ejecutamos la multiplicación. Veamos la línea de código:

  1. =m1*m2;

Y por último deberemos de asignar el valor al campo de resultado. Para ello volvemos a utilizar el getElementById(identificador).

  1. document.getElementById("resultado").value = r;

De esta forma la función quedaría de la siguiente forma:

  1. function multiplicar(){
  2. m1 = document.getElementById("multiplicando").value;
  3. m2 = document.getElementById("multiplicador").value;
  4. r = m1*m2;
  5. document.getElementById("resultado").value = r;
  6. }

Vídeos sobre Javascript


22 comentarios en “Formulario que multiplica números en JavaScript”

Víctor Cuervo

Juanjacob

Buenas noches para todos,

Quisiera saber como puedo crear una factura utilizando un formulario en javascript.

Muchas gracias.

Víctor Cuervo

radhames

buenas estoy copiando este codigo en la pagina y no me funciona que estoy haciendo mal es la pregunta
no tengo conocimiento de programacion

function multiplicar() {…}

X
=

function multiplicar(){
m1 = document.getElementById(“multiplicando”).value;
m2 = document.getElementById(“multiplicador”).value;
r = m1*m2;
document.getElementById(“resultado”).value = r;
}

Víctor Cuervo

Víctor Cuervo

radhames,

El código que funciona lo tenemos en https://github.com/victorcuervo/lineadecodigo_javascript/blob/master/formularios/multiplicar-numeros.html Mira a ver si copiándolo te funciona.

Saludos.

Víctor Cuervo

ROUS

muy bueno gracias 😀

Víctor Cuervo

Víctor Cuervo

Gracias por el comentario Rous. Nos alegra saber que te ha gustado.

Saludos.

Víctor Cuervo

Pablo

Hola!.
Quisiera realizar para un sitio web hecho con wordprees que 2 campos se multipliquen entre sí (Alto x Ancho de una cortina) Para que me de los mts2 de esta; y una vez hecho esto lo multiplique por el precio asignado a cada mt2.

Al ser novato en el tema, ni siquiera sé como introducirlo en mi sitio web. En una parte explicas que hay que introducir el codigo en el head de html y lo demas en una pagina nueva?. Disculpe por la pregunta y espero que me puedan ayudar.

Gracias!.

Víctor Cuervo

Víctor Cuervo

Hola Pablo,

Si estás con WordPress editando una entrada creo que no te soporta el código Javascript. Es por ello que tienes que editar el tema de WordPress que estés utilizando (Apariencia >> Editor) y buscar un fichero que se llame header.php para insertar el código Javascript.

Espero que te oriente un poco. Saludos.

Víctor Cuervo

Gabriel

Hola, alguien me podría ayudar con código para insertar un formulario de calculo para cortinas online.
Necesito que el usuario coloque el ancho en centímetros y el alto en centímetros y le de un resultado,el precio de la cortina. Los costos estarían ocultos al usuario, algo que solo cargaría yo y que pueda ajustar según se necesite, el usuario solo carga las mediadas y le aparece el resultado o sea el precio. Es muy posible que ya exista algo asi, pero yo lo lo encuentro.Muchas gracias.

Víctor Cuervo

Víctor Cuervo

Hola Gabriel,

Siguiendo este ejemplo puedes crear un tercer campo oculto (son los tipo “hidden”) que tenga el valor del precio. Al ser oculto no lo verá el usuario:

<input type="hidden" id="precio" value="145"/>

Luego solo tienes que meterlo en la multiplicación, dónde en vez de 2 campos, multiplicaras 3.

function multiplicar(){
  m1 = document.getElementById("multiplicando").value;
  m2 = document.getElementById("multiplicador").value;
  m3 = document.getElementById("precio").value;
  r = m1*m2*m3;
  document.getElementById("resultado").value = r;
}

Espero que te oriente. Saludos.

Víctor Cuervo

Profesor Yeow

Sumamente util. Muchisimas gracias por la gran explicacion.

Víctor Cuervo

Víctor Cuervo

@jose,

Cualquier valor numérico devuelto por el API de Google Maps lo podrás multiplicar. Si quieres comparte el código aquí o en nuestro foro de Google Maps y lo echamos un ojo.
http://www.dudasprogramacion.com/forum/google/google-maps/

Saludos.

Víctor Cuervo

jose

Hola, tengo muy poco conocimiento pero estoy haciendo un formulario y estoy usando un codigo de google api donde al buscar 2 dirrecciones google me da las millas y yo quiero poder multiplicar las millas por un numero quisiera saber si este cod me funciona o si hubiera otra forma si pudieran darme luz, grasias de antemano.

Víctor Cuervo

Rex

Estimado jack.. la verdad si no tienes logica de programacion cambiate a abogado.

no te cuesta nada cambiar el tipo de evento a evaluar que seria
value=”” onKeyUp=”multiplicar(this);”
saludOs.

Víctor Cuervo

Víctor Cuervo

@Daniel, gracias por el comentario. Anima a continuar adelante.

Víctor Cuervo

Daniel

Excelente!!! Simple, claro y efectivo. Muchas gracias por tu tiempo!

Víctor Cuervo

jorge

pues ami me va de puta madre para un codeka peru que estoy haciendo..tengo esa funcion puesta en mi pagina de facturacion

Víctor Cuervo

jack

es una webada de codigo NO LO BAJEN no sirve no actualiza los totales sino sirve PARA Q MIERDA lo suben

Víctor Cuervo

julio

una mierda de funsion

Víctor Cuervo

julio

eso document.getElementById(“resultado”).value = r;

nooooooooooo

Víctor Cuervo

julio

esta mala la huea de codigo

Víctor Cuervo

lineadecodigo

Me parece muy buen ejemplo para explicar. Acabo de publicar el ejemplo de como hacerlo en Calculo de totales y subtotales en JavaScript.

Espero que sea de ayuda.

Víctor Cuervo

Angel Luis

He probado su código, y me ha parecido estupendo.
Pero, ¿cómo sería el código si se da una cantidad prefijada a la que haya que multiplicar por un número? Es decir, en un listado de productos, el producto A vale 15,63€, si se multiplica por 3 (unidades) el resultado sería: 46,89€. Gracias.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*