Foros del Web » Programando para Internet » Javascript »

Incompatibilidad con IE

 Estas en el tema de Incompatibilidad con IE en el foro de Javascript en Foros del Web. Hola a todos: El siguiente código me da errores con IE, aunque en firefox funciona correctamente: Código HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> ...
  #1 (permalink)  
Antiguo 24/01/2008, 03:34
 
Fecha de Ingreso: abril-2003
Mensajes: 363
Antigüedad: 21 años
Puntos: 3
Incompatibilidad con IE
Hola a todos:

El siguiente código me da errores con IE, aunque en firefox funciona correctamente:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html> 
<head>
<title>Crear inputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
//Inicializamos el contador
var cont = 0;

//Función Añadir linea
function addLine(id, orden, detalles, cantidad, total) {
  //Sumanos uno al contador
  cont++;
  
  tab = document.getElementById('tabla');

  //Añadimos una nueva fila
  fila = tab.appendChild(document.createElement('tr'));
  
  //Input Id
  celdaorden = fila.appendChild(document.createElement('td'));
  id = celdaorden.appendChild(document.createElement('input'));
  id.type='hidden';
  id.name='id'+cont;
  id.id='id'+cont;
  id.value = id;
  
  //Input Orden
  orden = celdaorden.appendChild(document.createElement('input'));
  orden.style.width = '50px';
  orden.name='orden'+cont;
  orden.id='orden'+cont;
  orden.value = orden;
  
  //Input detalles
  celdadetalles = fila.appendChild(document.createElement('td'));
  detalles = celdadetalles.appendChild(document.createElement('input'));
  detalles.style.width = '100%';
  detalles.name='detalles'+cont;
  detalles.id='detalles'+cont;
  detalles.value = detalles;
  
  //Input Cantidad
  celdacantidad = fila.appendChild(document.createElement('td'));
  cantidad = celdacantidad.appendChild(document.createElement('input'));
  cantidad.style.width = '50px';
  cantidad.name='cantidad'+cont;
  cantidad.id='cantidad'+cont;
  cantidad.value = cantidad;
  
  //Input tarifa
  celdatarifa = fila.appendChild(document.createElement('td'));
  tarifa = celdatarifa.appendChild(document.createElement('input'));
  tarifa.style.width = '100px';
  tarifa.name='tarifa'+cont;
  tarifa.id='tarifa'+cont;
  tarifa.value = tarifa;
  
  //Input Total
  celdatotal = fila.appendChild(document.createElement('td'));
  total = celdatotal.appendChild(document.createElement('input'));
  total.style.width = '100px';
  total.name='total'+cont;
  total.id='total'+cont;
  total.value = total;
  
  //Boton Borrar
  celdaborrar = fila.appendChild(document.createElement('td'));
  borrar = celdaborrar.appendChild(document.createElement('input'));
  borrar.type='button';
  borrar.name='orden'+cont;
  borrar.id='orden'+cont;
  borrar.value = 'Borrar';
  borrar.onclick=function() {
    tab = document.getElementById('tabla');
    padre = this.parentNode.parentNode;
    tab.removeChild(padre);
    
     //Restamos uno al contador
    cont--;

    //actualizamos el contador
    document.getElementById('contador').value = cont;
  }

  //actualizamos el contador
  document.getElementById('contador').value = cont;
}
</script>
</head>
<body>

<?php echo "Respuesta:<br><textarea cols=\"50\" rows=\"8\" readonly=\"true\">" . print_r($_POST, true) . "</textarea><br><br>"; ?>

<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
                      <div align='right'><a href='#' onclick='addLine(11, 22, 33, 44, 55);return false'>Añadir Linea +</a></div>
                      <table width='100%'>
                      <tr>
                        <td width='50' align='center'><strong>Orden</strong></td>
                        <td align='center'><strong>Detalles</strong></td>
                        <td width='50' align='center'><strong>Cantidad</strong></td>
                        <td width='100' align='center'><strong>Tarifa</strong></td>
                        <td width='100' align='center'><strong>Total</strong></td>
                        <td width='50'></td>
                      </tr>
                  <tbody id='tabla'>
                  </tbody>
                </table>
<input type='hidden' value='0' name='contador' id='contador'>
<input class="boton" name="insertar" type="submit" id="insertar" value="Guardar..." />
</form>

</body>
</html>
El codigo hace tres cosas, por un lado inserta filas a una tabla con unos valores dados y después actualiza un campo hidden con el valor del contador de lineas.

En firefox me funciona todo excepto el pasar valores, que me da error "[object HTMLInputElement]", el resto funciona correctamente.

En IE no guarda los estilos de los inputs, me da error en la linea type (y eso que he probado con id.setAttribute('type', 'hidden'); pero no funciona), tampoco actualiza en campo hiddden llamado contador.
¿Como podría hacer para que el codigo funcione en todos los navegadores?

¿Me podeis hechar una mano?

Muchas Gracias
  #2 (permalink)  
Antiguo 24/01/2008, 06:26
 
Fecha de Ingreso: abril-2003
Mensajes: 363
Antigüedad: 21 años
Puntos: 3
Re: Incompatibilidad con IE
He probado con esto pero:

Código HTML:
//Función Añadir linea
function addLine(id, orden, detalles, cantidad, total) {
  //Sumanos uno al contador
  cont++;
  
  tab = document.getElementById('tabla');

  //Añadimos una nueva fila
  fila = tab.appendChild(document.createElement('tr'));
  
  //Input Id
  celdaorden = fila.appendChild(document.createElement('td'));
  id = celdaorden.appendChild(document.createElement('input'));
  id.setAttribute('type',"hidden");
  id.setAttribute('name','id'+cont);
  id.setAttribute('id','id'+cont);
  id.setAttribute('value',id);
  
  //Input Orden
  orden = celdaorden.appendChild(document.createElement('input'));
  orden.setAttribute('type','text');
  orden.setAttribute('name','orden'+cont);
  orden.setAttribute('id','orden'+cont);
  orden.setAttribute('style','width:50px;');
  orden.setAttribute('value',orden);
  
  //Input detalles
  celdadetalles = fila.appendChild(document.createElement('td'));
  detalles = celdadetalles.appendChild(document.createElement('input'));
  detalles.setAttribute('type','text');
  detalles.setAttribute('name','detalles'+cont);
  detalles.setAttribute('id','detalles'+cont);
  detalles.setAttribute('style','width:100%;');
  detalles.setAttribute('value',orden);
  
  //Input Cantidad
  celdacantidad = fila.appendChild(document.createElement('td'));
  cantidad = celdacantidad.appendChild(document.createElement('input'));
  cantidad.setAttribute('type','text');
  cantidad.setAttribute('name','cantidad'+cont);
  cantidad.setAttribute('id','cantidad'+cont);
  cantidad.setAttribute('style','width:50px;');
  cantidad.setAttribute('value',cantidad);
  
  //Input tarifa
  celdatarifa = fila.appendChild(document.createElement('td'));
  tarifa = celdatarifa.appendChild(document.createElement('input'));
  tarifa.setAttribute('type','text');
  tarifa.setAttribute('name','tarifa'+cont);
  tarifa.setAttribute('id','tarifa'+cont);
  tarifa.setAttribute('style','width:100px;');
  tarifa.setAttribute('value',tarifa);
  
  //Input Total
  celdatotal = fila.appendChild(document.createElement('td'));
  total = celdatotal.appendChild(document.createElement('input'));
  total.setAttribute('type','text');
  total.setAttribute('name','total'+cont);
  total.setAttribute('id','total'+cont);
  total.setAttribute('style','width:100px;');
  total.setAttribute('value',total);
  
  //Boton Borrar
  celdaborrar = fila.appendChild(document.createElement('td'));
  borrar = celdaborrar.appendChild(document.createElement('input'));
  borrar.setAttribute('type','button');
  borrar.setAttribute('name','borrar'+cont);
  borrar.setAttribute('id','borrar'+cont);
  borrar.setAttribute('value','Borrar');
  borrar.onclick=function() {
    tab = document.getElementById('tabla');
    padre = this.parentNode.parentNode;
    tab.removeChild(padre);
    
	//Restamos unos al contador
    cont--;

    //actualizamos el contador
    document.getElementById('contador').setAttribute('value',cont);
  }
Con esto he conseguido que funcione el actualizar el contador tanto en firefox como en ie.
Ahora me da error en ie en las líneas:
id.setAttribute('type',"hidden");
borrar.setAttribute('type','button');
En firefox funcionan correctamente pero en ie falla.

Sigo sin conseguir arreglar el error "[object HTMLInputElement]", que me da tanto en ie como en firefox.

¿Sabeis como se puede arreglar?

Gracias adelantadas por vuestra ayuda.
  #3 (permalink)  
Antiguo 24/01/2008, 20:07
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Re: Incompatibilidad con IE
Aquí tenés la modificación para que funcione corectamente en todos los navegadores:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
<title>Crear inputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
//Inicializamos el contador
var cont = 0;

//Función Añadir linea
function addLine(ID, orden, detalles, cantidad, total) {
//Sumanos uno al contador
cont++;
tab = document.getElementById('tabla');
fila = document.createElement('tr');

//Input Id
celdaorden = document.createElement('td')
id=document.createElement('input')

//alert(id.nodeName)
//id.type='hidden';
id.type='hidden';
id.name='id'+cont;
id.id='id'+cont;
id.value = ID;
celdaorden.appendChild(id);

//Input Orden
orden = document.createElement('input')
orden.style.width = '50px';
orden.name='orden'+cont;
orden.id='orden'+cont;
orden.value = orden;
celdaorden.appendChild(orden);
fila.appendChild(celdaorden);
//Input detalles
celdadetalles = document.createElement('td');
detalles = document.createElement('input');
detalles.style.width = '100%';
detalles.name='detalles'+cont;
detalles.id='detalles'+cont;
detalles.value = detalles;
celdadetalles.appendChild(detalles)
fila.appendChild(celdadetalles);
//Input Cantidad
celdacantidad = document.createElement('td');
cantidad = document.createElement('input');
cantidad.style.width = '50px';
cantidad.name='cantidad'+cont;
cantidad.id='cantidad'+cont;
cantidad.value = cantidad;
celdacantidad.appendChild(cantidad)
fila.appendChild(celdacantidad);

//Input tarifa
celdatarifa = document.createElement('td')
tarifa =document.createElement('input') 
tarifa.style.width = '100px';
tarifa.name='tarifa'+cont;
tarifa.id='tarifa'+cont;
tarifa.value = tarifa;
celdatarifa.appendChild(tarifa);
fila.appendChild(celdatarifa);
//Input Total
celdatotal = document.createElement('td')
total = document.createElement('input');
total.style.width = '100px';
total.name='total'+cont;
total.id='total'+cont;
total.value = total;
celdatotal.appendChild(total)
fila.appendChild(celdatotal);
//Boton Borrar
celdaborrar = document.createElement('td')
borrar = document.createElement('input')
borrar.type='button';
borrar.name='orden'+cont;
borrar.id='orden'+cont;
borrar.value = 'Borrar';
borrar.onclick=function() {
tab = document.getElementById('tabla');
padre = this.parentNode.parentNode;
tab.removeChild(padre);

//Restamos uno al contador
cont--;

//actualizamos el contador
document.getElementById('contador').value = cont;
}
celdaborrar.appendChild(borrar);
fila.appendChild(celdaborrar);
tab.appendChild(fila)
//actualizamos el contador
document.getElementById('contador').value = cont;
}
</script>
</head>
<body>

<form><?php echo "Respuesta:<br><textarea cols=\"50\" rows=\"8\" readonly=\"true\">" . print_r($_POST, true) . "</textarea><br><br>"; ?><br><br></form>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div align='right'><a href='#' onclick='addLine(++document.getElementById("contador").value, 22, 33, 44, 55);return false'>Añadir Linea +</a></div>
<table width='100%'>
<tr>
<td width='50' align='center'><strong>Orden</strong></td>
<td align='center'><strong>Detalles</strong></td>
<td width='50' align='center'><strong>Cantidad</strong></td>
<td width='100' align='center'><strong>Tarifa</strong></td>
<td width='100' align='center'><strong>Total</strong></td>
<td width='50'></td>
</tr>
<tbody id='tabla'>
</tbody>
</table>
<input type='hidden' value='0' name="contador" id='contador'>
<input class="boton" name="insertar" type="submit" id="insertar" value="Guardar..." />
</form>

</body>
</html>
Básicamente el error consistía en agregar el elemento con appendChild antes de definir sus propiedades. Los pasos a seguir son:
-Referenciar el contenedor
-Crear el elemento (document.createElement)
-Definir sus propiedades
-Agregarlo al contenedor (appendChild)
  #4 (permalink)  
Antiguo 25/01/2008, 04:05
 
Fecha de Ingreso: abril-2003
Mensajes: 363
Antigüedad: 21 años
Puntos: 3
Re: Incompatibilidad con IE
Perfecto!!

El unico fallo ahora es que no me respeta las anchuras, he probado con setattribute pero nada.
Si me ayudais con esto ya sería la leche.

Muchisimas gracias por toda la ayuda que me habeis prestado.

Saludos
  #5 (permalink)  
Antiguo 25/01/2008, 07:22
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Re: Incompatibilidad con IE
Ahí ya no es problema de js sino de html. Se arregla así:
Código PHP:
<table width="100%">

<tr>
<td width="50" align="center"><strong>Orden</strong></td>
<td align="center" width="100%"><strong>Detalles</strong></td>
<td width="50" align="center"><strong>Cantidad</strong></td>
<td width="100" align="center"><strong>Tarifa</strong></td>
<td width="100" align="center"><strong>Total</strong></td>
<td width="50">&nbsp;</td>
</tr>
<tbody id="tabla">
</tbody>
</table> 
Es decir, agregándole un width a la columna Detalles.
  #6 (permalink)  
Antiguo 26/01/2008, 09:30
 
Fecha de Ingreso: abril-2003
Mensajes: 363
Antigüedad: 21 años
Puntos: 3
Re: Incompatibilidad con IE
Hola:

He intentado poner el ancho fijo a un td pero nada, sigue igual. He usado setattribute y .style.
¿De todas forma el td no tendría ya el ancho predefinido arriba? en esta parte del código?
Código HTML:
<tr>
<td width="50" align="center"><strong>Orden</strong></td>
<td align="center" width="100%"><strong>Detalles</strong></td>
<td width="50" align="center"><strong>Cantidad</strong></td>
<td width="100" align="center"><strong>Tarifa</strong></td>
<td width="100" align="center"><strong>Total</strong></td>
<td width="50">&nbsp;</td>
</tr>
Lo que intento es poner al 100% todos los inputs, y que se ajusten al ancho que tiene cada fila en el codigo superior.

¿Como lo debería poner?

Gracias
  #7 (permalink)  
Antiguo 26/01/2008, 09:51
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Re: Incompatibilidad con IE
Entonces también tendrás que modificar tu javascript en todos los casos casos como este: cantidad.style.width = '50px';, donde colocás las medidas en px; en esos casos tendrás que colocar cantidad.style.width = '100%';
Así:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
<title>Crear inputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
//Inicializamos el contador
var cont = 0;

//Función Añadir linea
function addLine(ID, orden, detalles, cantidad, total) {
//Sumanos uno al contador
cont++;
tab = document.getElementById('tabla');
fila = document.createElement('tr');

//Input Id
celdaorden = document.createElement('td')
id=document.createElement('input')

//alert(id.nodeName)
//id.type='hidden';
id.type='hidden';
id.name='id'+cont;
id.id='id'+cont;
id.value = ID;
celdaorden.appendChild(id);

//Input Orden
orden = document.createElement('input')
orden.style.width = '100%';
orden.name='orden'+cont;
orden.id='orden'+cont;
orden.value = orden;
celdaorden.appendChild(orden);
fila.appendChild(celdaorden);
//Input detalles
celdadetalles = document.createElement('td');
detalles = document.createElement('input');
detalles.style.width = '100%';
detalles.name='detalles'+cont;
detalles.id='detalles'+cont;
detalles.value = detalles;
celdadetalles.appendChild(detalles)
fila.appendChild(celdadetalles);
//Input Cantidad
celdacantidad = document.createElement('td');
cantidad = document.createElement('input');
cantidad.style.width = '100%';
cantidad.name='cantidad'+cont;
cantidad.id='cantidad'+cont;
cantidad.value = cantidad;
celdacantidad.appendChild(cantidad)
fila.appendChild(celdacantidad);

//Input tarifa
celdatarifa = document.createElement('td')
tarifa =document.createElement('input') 
tarifa.style.width = '100%';
tarifa.name='tarifa'+cont;
tarifa.id='tarifa'+cont;
tarifa.value = tarifa;
celdatarifa.appendChild(tarifa);
fila.appendChild(celdatarifa);
//Input Total
celdatotal = document.createElement('td')
total = document.createElement('input');
total.style.width = '100%';
total.name='total'+cont;
total.id='total'+cont;
total.value = total;
celdatotal.appendChild(total)
fila.appendChild(celdatotal);
//Boton Borrar
celdaborrar = document.createElement('td')
borrar = document.createElement('input')
borrar.type='button';
borrar.name='orden'+cont;
borrar.id='orden'+cont;
borrar.value = 'Borrar';
borrar.onclick=function() {
tab = document.getElementById('tabla');
padre = this.parentNode.parentNode;
tab.removeChild(padre);

//Restamos uno al contador
cont--;

//actualizamos el contador
document.getElementById('contador').value = cont;
}
celdaborrar.appendChild(borrar);
fila.appendChild(celdaborrar);
tab.appendChild(fila)
//actualizamos el contador
document.getElementById('contador').value = cont;
}
</script>
</head>
<body>

<form><?php echo "Respuesta:<br><textarea cols=\"50\" rows=\"8\" readonly=\"true\">" . print_r($_POST, true) . "</textarea><br><br>"; ?><br><br></form>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div align='right'><a href='#' onclick='addLine(++document.getElementById("contador").value, 22, 33, 44, 55);return false'>Añadir Linea +</a></div>
<table width="100%">

<tr>
<td width="50" align="center"><strong>Orden</strong></td>
<td align="center" width="100%"><strong>Detalles</strong></td>
<td width="50" align="center"><strong>Cantidad</strong></td>
<td width="100" align="center"><strong>Tarifa</strong></td>
<td width="100" align="center"><strong>Total</strong></td>
<td width="50">&nbsp;</td>
</tr>
<tbody id="tabla">
</tbody>
</table>  
<input type='hidden' value='0' name="contador" id='contador'>
<input class="boton" name="insertar" type="submit" id="insertar" value="Guardar..." />
</form>

</body>
</html>
  #8 (permalink)  
Antiguo 26/01/2008, 10:23
 
Fecha de Ingreso: abril-2003
Mensajes: 363
Antigüedad: 21 años
Puntos: 3
Re: Incompatibilidad con IE
Hola de nuevo,

Ya siento volver a molestaros, lo anterior está 100% perfecto!!, aunque ahora quería hacer una cosilla que nose si será viable, sería en que en cada linea del presupuesto se calculara el total y después se calculara un total general de todas las línes del presupuesto, el código con el que lo he intentado es el siguiente:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
<title>Crear inputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
//Inicializamos el contador
var cont = 0;

//Función Añadir linea
function addLine(ORDEN, DETALLES, CANTIDAD, TARIFA, TOTAL) {
	//Sumanos uno al contador
	cont++;
	
	//Escribimos los ids en una capa
	fi = document.getElementById('capadestino'); // 1
	contenedor = document.createElement('div'); // 2
	contenedor.id = 'div'+cont; // 3
	fi.appendChild(contenedor); // 4
	
	id = document.createElement('input'); // 5
	id.type='hidden';
	id.name='idcrucero'+cont;
	id.id='idcrucero'+cont;
	id.value = cont;
	contenedor.appendChild(id); // 7
	
	tab = document.getElementById('tabla');
	fila = document.createElement('tr');
	
	//Input Tipo
	celdaorden = document.createElement('td')
	tipo=document.createElement('input')
	tipo.type='hidden';
	tipo.name='tipo'+cont;
	tipo.id='tipo'+cont;
	tipo.value = '1';
	celdaorden.appendChild(tipo);
	//Input Orden
	orden = document.createElement('input')
	orden.style.width = '100%';
	orden.name='orden'+cont;
	orden.id='orden'+cont;
	orden.value = ORDEN;
	celdaorden.appendChild(orden);
	fila.appendChild(celdaorden);
	
	//Input detalles
	celdadetalles = document.createElement('td');
	detalles = document.createElement('input');
	detalles.style.width = '100%';
	detalles.name='detalles'+cont;
	detalles.id='detalles'+cont;
	detalles.value = DETALLES;
	celdadetalles.appendChild(detalles);
	fila.appendChild(celdadetalles);
	
	//Input Cantidad
	celdacantidad = document.createElement('td');
	cantidad = document.createElement('input');
	cantidad.style.width = '100%';
	cantidad.name='cantidad'+cont;
	cantidad.id='cantidad'+cont;
	cantidad.value = CANTIDAD;
	//cantidad.setAttribute( 'onkeyup', sumar(cont));
	celdacantidad.appendChild(cantidad);
	fila.appendChild(celdacantidad);
	
	//Input tarifa
	celdatarifa = document.createElement('td')
	tarifa =document.createElement('input') 
	tarifa.style.width = '100px';
	tarifa.name='tarifa'+cont;
	tarifa.id='tarifa'+cont;
	tarifa.value = TARIFA;
	//tarifa.setAttribute( 'onkeyup', sumar(cont));
	celdatarifa.appendChild(tarifa);
	fila.appendChild(celdatarifa);
	
	//Input Total
	celdatotal = document.createElement('td')
	total = document.createElement('input');
	total.style.width = '100%';
	total.name='total'+cont;
	total.id='total'+cont;
	total.value = TOTAL;
	celdatotal.appendChild(total);
	fila.appendChild(celdatotal);
	
	//Boton Borrar
	celdaborrar = document.createElement('td')
	borrar = document.createElement('input')
	borrar.type='button';
	borrar.name='borrar'+cont;
	borrar.id='borrar'+cont;
	borrar.value = 'Borrar';
	borrar.onclick=function() {
		tab = document.getElementById('tabla');
		padre = this.parentNode.parentNode;
		tab.removeChild(padre);
		
		//Restamos uno al contador
		//cont--;
		//actualizamos el contador
		//document.getElementById('contador').value = cont;
	}
	celdaborrar.appendChild(borrar);
	fila.appendChild(celdaborrar);
	tab.appendChild(fila)
	
	//actualizamos el contador
	document.getElementById('contador').value = cont;
}

function sumar(cont){
	var resultado = 0, general = 0;
	var cantidad = cantidad.getElementsByName('cantidad'+cont);
	var tarifa = tarifa.getElementsByName('tarifa'+cont);
	
	// Total de la linea
	resultado = cantidad.value * tarifa.value;
	total.getElementById('total'+cont).value = resultado;

	//Total General
	for(a=0; a<cont; a++){
		general += (parseFloat('total'+cont.value));
	}
	document.getElementById('totalgeneral').value = 5;
}

</script>
</head>
<body>

<form><?php echo "Respuesta:<br><textarea cols=\"50\" rows=\"8\" readonly=\"true\">" . print_r($_POST, true) . "</textarea><br><br>"; ?><br><br></form>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div align='right'><a href='#' onclick='addLine(11, 22, 33, 44, 55);return false'>Añadir Linea +</a></div>
<div id='capadestino'></div><br />
<table width="100%" cellpadding="3" cellspacing="3">

<tr>
<td width="50" align="center"><strong>Orden</strong></td>
<td align="center" width="100%"><strong>Detalles</strong></td>
<td width="50" align="center"><strong>Cantidad</strong></td>
<td width="100" align="center"><strong>Tarifa</strong></td>
<td width="100" align="center"><strong>Total</strong></td>
<td width="50">&nbsp;</td>
</tr>
<tbody id="tabla">
</tbody>
</table>  
Total: <input type='text' value='0' name="total" id='total'>
<input type='hidden' value='0' name="contador" id='contador'>
<input class="boton" name="insertar" type="submit" id="insertar" value="Guardar..." />
</form>

</body>
</html>
El input totalgeneral está fuera de la tabla, y lo único que tiene que hacer es actualizarse con el total general.

¿Esto se podría hacer?

Gracias por todo.
  #9 (permalink)  
Antiguo 27/01/2008, 15:14
 
Fecha de Ingreso: abril-2003
Mensajes: 363
Antigüedad: 21 años
Puntos: 3
Re: Incompatibilidad con IE
Hola:

¿Me podeis ayudar? He estado todo el fin de semana revisando webs y webs y probando y nada.
Creo que el error es cuando hago referencia a los campos input desde la función sumar, pero nose como hacerlo.

Muchas Gracias
  #10 (permalink)  
Antiguo 30/01/2008, 08:30
 
Fecha de Ingreso: abril-2003
Mensajes: 363
Antigüedad: 21 años
Puntos: 3
Re: Incompatibilidad con IE
¿alguno sabe como puedo hacerlo?

Muchas Gracias
  #11 (permalink)  
Antiguo 30/01/2008, 14:06
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Re: Incompatibilidad con IE
Fijate si así te sirve:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
<title>Crear inputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
//Inicializamos el contador
var cont = 0;

//Función Añadir linea
function addLine(ORDEN, DETALLES, CANTIDAD, TARIFA, TOTAL) {
    //Sumanos uno al contador
    cont++;
    
    //Escribimos los ids en una capa
    fi = document.getElementById('capadestino'); // 1
    contenedor = document.createElement('div'); // 2
    contenedor.id = 'div'+cont; // 3
    fi.appendChild(contenedor); // 4
    
    id = document.createElement('input'); // 5
    id.type='hidden';
    id.name='idcrucero'+cont;
    id.id='idcrucero'+cont;
    id.value = cont;
    contenedor.appendChild(id); // 7
    
    tab = document.getElementById('tabla');
    fila = document.createElement('tr');
    
    //Input Tipo
    celdaorden = document.createElement('td')
    tipo=document.createElement('input')
    tipo.type='hidden';
    tipo.name='tipo'+cont;
    tipo.id='tipo'+cont;
    tipo.value = '1';
    celdaorden.appendChild(tipo);
    //Input Orden
    orden = document.createElement('input')
    orden.style.width = '100%';
    orden.name='orden'+cont;
    orden.id='orden'+cont;
    orden.value = ORDEN;
    celdaorden.appendChild(orden);
    fila.appendChild(celdaorden);
    
    //Input detalles
    celdadetalles = document.createElement('td');
    detalles = document.createElement('input');
    detalles.style.width = '100%';
    detalles.name='detalles'+cont;
    detalles.id='detalles'+cont;
    detalles.value = DETALLES;
    celdadetalles.appendChild(detalles);
    fila.appendChild(celdadetalles);
    
    //Input Cantidad
    celdacantidad = document.createElement('td');
    cantidad = document.createElement('input');
    cantidad.style.width = '100%';
    cantidad.name='cantidad'+cont;
    cantidad.id='cantidad'+cont;
    cantidad.value = CANTIDAD;
    //cantidad.setAttribute( 'onkeyup', sumar(cont));
    celdacantidad.appendChild(cantidad);
    fila.appendChild(celdacantidad);
    
    //Input tarifa
    celdatarifa = document.createElement('td')
    tarifa =document.createElement('input') 
    tarifa.style.width = '100px';
    tarifa.name='tarifa'+cont;
    tarifa.id='tarifa'+cont;
    tarifa.value = TARIFA;
    //tarifa.setAttribute( 'onkeyup', sumar(cont));
    celdatarifa.appendChild(tarifa);
    fila.appendChild(celdatarifa);
    
    //Input Total
    celdatotal = document.createElement('td')
    total = document.createElement('input');
    total.style.width = '100%';
    total.name='total'+cont;
    total.id='total'+cont;
    total.value = TOTAL;
    celdatotal.appendChild(total);
    fila.appendChild(celdatotal);
    
    //Boton Borrar
    celdaborrar = document.createElement('td')
    borrar = document.createElement('input')
    borrar.type='button';
    borrar.name='borrar'+cont;
    borrar.id='borrar'+cont;
    borrar.value = 'Borrar';
    borrar.onclick=function() {
    document.getElementById('totalgeneral').value-=document.getElementById('total'+this.id.split('borrar').join('')).value;
        tab = document.getElementById('tabla');
        padre = this.parentNode.parentNode;
        tab.removeChild(padre);
        
        
        //Restamos uno al contador
        //actualizamos el contador
        //document.getElementById('contador').value = cont;
    }
    celdaborrar.appendChild(borrar);
    fila.appendChild(celdaborrar);
    tab.appendChild(fila)
    
    //actualizamos el contador
    document.getElementById('contador').value = cont;
    sumar(cont);
}

function sumar(cont){
    var resultado = 0, general = 0;
    var cantidad = document.getElementById('cantidad'+cont);
    var tarifa = document.getElementById('tarifa'+cont);
    document.getElementById('totalgeneral').value=0;
    // Total de la linea
    resultado = cantidad.value * tarifa.value;
    document.getElementById('total'+cont).value = resultado;

    //Total General
    for(a=cont; a>0; a--){
    if(!document.getElementById('total'+a))continue;
        general += (parseFloat(document.getElementById('total'+a).value)) || 0;
    }
    document.getElementById('totalgeneral').value = general;
}
</script>
</head>
<body>

<form><?php echo "Respuesta:<br><textarea cols=\"50\" rows=\"8\" readonly=\"true\">" . print_r($_POST, true) . "</textarea><br><br>"; ?><br><br></form>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div align='right'><a href='#' onclick='addLine(11, 22, 33, 44, 55);return false'>Añadir Linea +</a></div>
<div id='capadestino'></div><br />
<table width="100%" cellpadding="3" cellspacing="3">

<tr>
<td width="50" align="center"><strong>Orden</strong></td>
<td align="center" width="100%"><strong>Detalles</strong></td>
<td width="50" align="center"><strong>Cantidad</strong></td>
<td width="100" align="center"><strong>Tarifa</strong></td>
<td width="100" align="center"><strong>Total</strong></td>
<td width="50">&nbsp;</td>
</tr>
<tbody id="tabla">
</tbody>
</table>  
Total: <input type='text' value='0' name="total" id='totalgeneral'>
<input type='hidden' value='0' name="contador" id='contador'>
<input class="boton" name="insertar" type="submit" id="insertar" value="Guardar..." />
</form>

</body>
</html>
Última edición por Panino5001; 30/01/2008 a las 14:50
  #12 (permalink)  
Antiguo 30/01/2008, 15:49
 
Fecha de Ingreso: abril-2003
Mensajes: 363
Antigüedad: 21 años
Puntos: 3
Re: Incompatibilidad con IE
Muchas Gracias por tu respuesta Panino, funciona perfecto

El único inconveniente es que si actualiza la cantidad o la tarifa no se me actualiza ni el total de la linea y el total general, he probado con
Código HTML:
cantidad.setAttribute( 'onkeyup', sumar(cont));
y con
Código HTML:
cantidad.onkeyup = sumar(cont);
pero se bloquea y no crea las filas, se bloquea.

Si me ayudais con esto prometo no molestaros más.

Gracias de nuevo.
  #13 (permalink)  
Antiguo 30/01/2008, 16:37
 
Fecha de Ingreso: agosto-2007
Mensajes: 123
Antigüedad: 16 años, 8 meses
Puntos: 0
Re: Incompatibilidad con IE
hola que tal, tal vez este post no deberia ir aqui pero veo que es parecido a lo que a mi me pasa y quiero ver si me podrian ayudar, el problema es que mis formularios php los tengo validados con js y tambien tengo un menu desplegable en js, pero al momento de correrlos en IE en la barra de estado me dice: listo pero con errores, le doy clic sobre la leyenda y me dice que se esperaba un objeto, luego en firefox no me respeta los js, ni tampoco me muestra el menu, y en opera funciona a la perfeccion.

como puedo arreglar esto??? gracias de antemano y disculpen si no esta en el foro correcto
  #14 (permalink)  
Antiguo 30/01/2008, 16:58
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Re: Incompatibilidad con IE
Lo que no sé es si estoy siendo de mucha ayuda, ya que no sé si estoy logrando que entiendas cómo hacerlo solo.
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html>
<head>
<title>Crear inputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
//Inicializamos el contador
var cont = 0;

//Función Añadir linea
function addLine(ORDEN, DETALLES, CANTIDAD, TARIFA, TOTAL) {
    //Sumanos uno al contador
    cont++;
    
    //Escribimos los ids en una capa
    fi = document.getElementById('capadestino'); // 1
    contenedor = document.createElement('div'); // 2
    contenedor.id = 'div'+cont; // 3
    fi.appendChild(contenedor); // 4
    
    id = document.createElement('input'); // 5
    id.type='hidden';
    id.name='idcrucero'+cont;
    id.id='idcrucero'+cont;
    id.value = cont;
    contenedor.appendChild(id); // 7
    
    tab = document.getElementById('tabla');
    fila = document.createElement('tr');
    
    //Input Tipo
    celdaorden = document.createElement('td')
    tipo=document.createElement('input')
    tipo.type='hidden';
    tipo.name='tipo'+cont;
    tipo.id='tipo'+cont;
    tipo.value = '1';
    celdaorden.appendChild(tipo);
    //Input Orden
    orden = document.createElement('input')
    orden.style.width = '100%';
    orden.name='orden'+cont;
    orden.id='orden'+cont;
    orden.value = ORDEN;
    celdaorden.appendChild(orden);
    fila.appendChild(celdaorden);
    
    //Input detalles
    celdadetalles = document.createElement('td');
    detalles = document.createElement('input');
    detalles.style.width = '100%';
    detalles.name='detalles'+cont;
    detalles.id='detalles'+cont;
    detalles.value = DETALLES;
    celdadetalles.appendChild(detalles);
    fila.appendChild(celdadetalles);
    
    //Input Cantidad
    celdacantidad = document.createElement('td');
    cantidad = document.createElement('input');
    cantidad.style.width = '100%';
    cantidad.name='cantidad'+cont;
    cantidad.id='cantidad'+cont;
    cantidad.value = CANTIDAD;
    //cantidad.setAttribute( 'onkeyup', sumar(cont));
    celdacantidad.appendChild(cantidad);
    fila.appendChild(celdacantidad);
    
    //Input tarifa
    celdatarifa = document.createElement('td')
    tarifa =document.createElement('input') 
    tarifa.style.width = '100px';
    tarifa.name='tarifa'+cont;
    tarifa.id='tarifa'+cont;
    tarifa.value = TARIFA;
    //tarifa.setAttribute( 'onkeyup', sumar(cont));
    celdatarifa.appendChild(tarifa);
    fila.appendChild(celdatarifa);
    
    //Input Total
    celdatotal = document.createElement('td')
    total = document.createElement('input');
    total.style.width = '100%';
    total.name='total'+cont;
    total.id='total'+cont;
    total.value = TOTAL;
    celdatotal.appendChild(total);
    fila.appendChild(celdatotal);
    
    //Boton Borrar
    celdaborrar = document.createElement('td')
    borrar = document.createElement('input')
    borrar.type='button';
    borrar.name='borrar'+cont;
    borrar.id='borrar'+cont;
    borrar.value = 'Borrar';
    borrar.onclick=function() {
        tab = document.getElementById('tabla');
        padre = this.parentNode.parentNode;
        tab.removeChild(padre);
        
        
        //Restamos uno al contador
        //actualizamos el contador
        //document.getElementById('contador').value = cont;
    }
    celdaborrar.appendChild(borrar);
    fila.appendChild(celdaborrar);
    tab.appendChild(fila)
    
    //actualizamos el contador
    document.getElementById('contador').value = cont;
}

function sumar(){
general=0;
arrtarifa=[];
arrcantidad=[];
els=document.getElementById('tabla').getElementsByTagName('input');
for(i=0;i<els.length;i++){

if(els[i].id.indexOf('tarifa')!=-1){
arrtarifa.push(els[i].id);
}
if(els[i].id.indexOf('cantidad')!=-1){
arrcantidad.push(els[i].id);
}
}
    for(j=0;j<arrtarifa.length;j++){
    //alert()
        general+=parseFloat(document.getElementById('total'+arrtarifa[j].split('tarifa')[1]).value=document.getElementById(arrtarifa[j]).value*document.getElementById(arrcantidad[j]).value);
    }
    document.getElementById('totalgeneral').value = general;
}
window.onload=function(){
setInterval('sumar()',500);
}
</script>
</head>
<body>

<form><?php echo "Respuesta:<br><textarea cols=\"50\" rows=\"8\" readonly=\"true\">" . print_r($_POST, true) . "</textarea><br><br>"; ?><br><br></form>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div align='right'><a href='#' onclick='addLine(11, 22, 33, 44, 55);return false'>Añadir Linea +</a></div>
<div id='capadestino'></div><br />
<table width="100%" cellpadding="3" cellspacing="3">

<tr>
<td width="50" align="center"><strong>Orden</strong></td>
<td align="center" width="100%"><strong>Detalles</strong></td>
<td width="50" align="center"><strong>Cantidad</strong></td>
<td width="100" align="center"><strong>Tarifa</strong></td>
<td width="100" align="center"><strong>Total</strong></td>
<td width="50">&nbsp;</td>
</tr>
<tbody id="tabla">
</tbody>
</table>  
Total: <input type='text' value='0' name="total" id='totalgeneral'>
<input type='hidden' value='0' name="contador" id='contador'>
<input class="boton" name="insertar" type="submit" id="insertar" value="Guardar..." />
</form>

</body>
</html>
Última edición por Panino5001; 30/01/2008 a las 19:01
  #15 (permalink)  
Antiguo 31/01/2008, 00:52
 
Fecha de Ingreso: abril-2003
Mensajes: 363
Antigüedad: 21 años
Puntos: 3
Re: Incompatibilidad con IE
Muchas Gracias Panino, todo perfecto como siempre.
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 14:55.