Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] input dinamico con eventos onkeyup de multiplicar

Estas en el tema de input dinamico con eventos onkeyup de multiplicar en el foro de Javascript en Foros del Web. Buenas a todos soy nuevo con el javascript y estoy tratando de hacer un formulario dinamico el que agrege 3 inputs a precionar un boton. ...
  #1 (permalink)  
Antiguo 19/10/2014, 22:31
 
Fecha de Ingreso: abril-2014
Mensajes: 51
Antigüedad: 10 años
Puntos: 1
input dinamico con eventos onkeyup de multiplicar

Buenas a todos soy nuevo con el javascript y estoy tratando de hacer un formulario dinamico el que agrege 3 inputs a precionar un boton.

Al escribir numeros en los dos primeros inputs que se llamaran "cantidad" y "precio" multiplicara automáticamente y mostrara el resultado en "total" el tercer input

1- los dos primeros inputs tienen un evento onkeyup el cual seria:

Input cantidad
Código HTML:
<input type="text" name="c[]" id="1" onkeyup="if(agregar.precio.value!=""){agregar.total.value = parseInt(this.value)*parseInt(agregar.precio.value)') "> 
Input precio
Código HTML:
<input type="text" name="c[]" id="1" onkeyup="if(agregar.cantidad.value!=""){agregar.total.value = parseInt(this.value)*parseInt(agregar.cantidad.value)') "> 
Mas o menos ese seria el resultado que necesito pero como son dinamicos la id cambia y necesito que cambie el nombre el codigo java que utilizo es el siguiente para crear los inputs

Código:
<script type="text/javascript">

icremento =0;
function crear(obj) {
icremento++;

field = document.getElementById('field'); 
contenedor = document.createElement('div'); 
contenedor.id = 'div'+icremento; 
field.appendChild(contenedor);

boton = document.createElement('input');
boton.type = 'text';
boton.name = 'c'+'[]';
boton.id = +icremento;
boton.size='5';
boton.setAttribute('onKeyUp', 'if(agregar.precio.value!=""){agregar.total.value = parseInt(this.value)*parseInt(agregar.precio.value)');
contenedor.appendChild(boton); 

boton = document.createElement('input');
boton.type = 'text';
boton.name = 'p'+'[]';
boton.id = +icremento;
boton.size='5';
boton.setAttribute('onKeyUp', 'if(agregar.cantidad.value!=""){agregar.total.value = parseInt(this.value)*parseInt(agregar.cantidad.value)');
contenedor.appendChild(boton); 

}
El problema que tengo es como decirle que multiplique cada linea nueva que se cree, ya que tampoco puedo hacer que cambien el id en el codigo onkeyup no se si estoy por buen camino o la forma que utilizo no es la correcta.

alguien podria indicarme que puedo hacer o metodo utilizar ya que el codigo para crear los inputs dinámicos a sido a mi parecer el mejor que e logrado a comprender.

muchas gracias.
  #2 (permalink)  
Antiguo 20/10/2014, 00:57
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: input dinamico con eventos onkeyup de multiplicar

Andas de suerte, justo ando trabajando en una calculadora... no es igual pero reciclando algo de código casi seguro que te sirve, revisalo.

-> link a codigo y demo

Última edición por ArturoGallegos; 20/10/2014 a las 01:04 Razón: No se muestra jsfiddle con el shortcode
  #3 (permalink)  
Antiguo 20/10/2014, 09:55
 
Fecha de Ingreso: abril-2014
Mensajes: 51
Antigüedad: 10 años
Puntos: 1
Respuesta: input dinamico con eventos onkeyup de multiplicar

Muy buena calculadora la probé y si realmente es una mejor forma de aplicar el proceso de calcular en java y no en los inputs, pero sigo con la gran interrogante ya sea tu metodo o el que use anterior mente como hago que javascript calcule los dos inputs que se creen cada ves que precione un boton, recuerda que son dinamicos asi que tendria algo asi

Código HTML:
<input type="button" value="Crear fila" onClick="crear(this)">

<div class="mydiv1">
        <input type="text" name="cantidad[]" />
        <input type="text" name="precio[]" />
        <input type="text" name="total[]" readonly="" />

 </div>

<div class="mydiv2">
        <input type="text" name="cantidad[]" />
        <input type="text" name="precio[]" />
        <input type="text" name="total[]" readonly="" />

 </div>

<div class="mydiv3">
etc..
 </div> 
  #4 (permalink)  
Antiguo 20/10/2014, 12:08
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: input dinamico con eventos onkeyup de multiplicar

?¿ a ver, como que ya no entendí que buscas.... Que necesitas que calcule javascript al presionar el botón?

Pensé que este solo crearía una nueva linea con los 3 campos y estos deberían poder hacer de calculadora, cantidad*precio=total


?¿ hay algo de lo que me estoy perdiendo o no logro captar?
  #5 (permalink)  
Antiguo 20/10/2014, 15:59
 
Fecha de Ingreso: abril-2014
Mensajes: 51
Antigüedad: 10 años
Puntos: 1
Respuesta: input dinamico con eventos onkeyup de multiplicar

jejeje si creo que no explique bien pero ya tengo la solucion este es el resultado que esperaba y su solucion.



yo tengo un boton que crea inputs, estos son cantidad precio y total osea que tendre esos inputs idefinidamente repetidos, la idea es multiplicar cantidad por precio automaticamente tenia un codigo para multiplicar pero al ser dinamicos los inputs los creo por medio de javascript el detalle era que no sabia como ingresar ese codigo que multiplica a los inputs por java... asi que el resultado fue este


Código:
<script type="text/javascript">

icremento =0;
function crear(obj) {
icremento++;
field = document.getElementById('field'); 
contenedor = document.createElement('div'); 
contenedor.id = 'div'+icremento; 
field.appendChild(contenedor);

var calculoc = 'if(agregar.p'+ +icremento +'.value!=""){agregar.t'+ +icremento +'.value = parseFloat(this.value)*parseFloat(agregar.p'+ +icremento +'.value)}' ;
var calculop = 'if(agregar.c'+ +icremento +'.value!=""){agregar.t'+ +icremento +'.value = parseFloat(this.value)*parseFloat(agregar.c'+ +icremento +'.value)}' ;

boton = document.createElement('input');
boton.type = 'text';
boton.id = 'c'+icremento; 
boton.name = 'c'+'[]';
boton.size='5';
boton.setAttribute('onKeyUp',calculoc);
contenedor.appendChild(boton); 

boton = document.createElement('input'); 
boton.type = 'text'; 
boton.name = 'd'+'[]'; 
boton.size='48';
boton.required=true;
contenedor.appendChild(boton);

boton = document.createElement('input'); 
boton.type = 'text'; 
boton.name = 'm'+'[]'; 
boton.size='6';
contenedor.appendChild(boton);

boton = document.createElement('input'); 
boton.type = 'text';
boton.id = 'p'+icremento;
boton.setAttribute('onKeyUp',calculop);
boton.name = 'p'+'[]'; 
boton.size='6';
boton.required=true;
contenedor.appendChild(boton);

boton = document.createElement('input'); 
boton.type = 'text';
boton.id = 't'+icremento; 
boton.name = 't'+'[]'; 
boton.size='6';
boton.required=true;
boton.readOnly=true;
contenedor.appendChild(boton);

boton = document.createElement('input'); 
boton.type = 'button'; 
boton.value = 'Borrar'; 
boton.name = 'div'+icremento; 
boton.onclick = function () {borrar(this.name)} 
contenedor.appendChild(boton); 

}
function borrar(obj) {
field = document.getElementById('field'); 
field.removeChild(document.getElementById(obj)); 
}
</script>
basicamente era error de sintaxis, pero gracias por tu ayuda y tiempo igual le dare uso a tu codigo

Etiquetas: dinamico, eventos, formulario, input, multiplicar, onkeyup
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:41.