Foros del Web » Programando para Internet » Javascript »

Repaso al code de añadir inputs dynamicamente.

Estas en el tema de Repaso al code de añadir inputs dynamicamente. en el foro de Javascript en Foros del Web. Hola gente, en Mo(r)zilla (como dice tunait) esto funciona genial, pero en internet explorer me da un error "Tipo incorrecto". A ver si me podeis ...
  #1 (permalink)  
Antiguo 07/02/2005, 05:05
Avatar de markshock  
Fecha de Ingreso: abril-2004
Ubicación: Allí, al fondo a la izqui
Mensajes: 316
Antigüedad: 20 años
Puntos: 0
Repaso al code de añadir inputs dynamicamente.

Hola gente, en Mo(r)zilla (como dice tunait) esto funciona genial, pero en internet explorer me da un error "Tipo incorrecto".

A ver si me podeis hechar una HAND...

La aplicación en si, lo que hace es agregar campos input a un form dynamicamente, con opcion de borrar los insertados secuencialmente.

Código:
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--//
var newsInputs = 0;
var defecto = 4;
function addMatch(){
	var puntero = document.getElementById('nextMatch'); //recogemos donde van a ir los nuevos campos
	newNode = document.createElement('tr'); //creamos un elemento TR para poder agregar TD's
	total = 2; //definimos cuantos inputs queremos insertar de un tiron
	newsInputs++;
	for(i=0;i<total;i++){
		var num_equipo = document.getElementsByName('equipo').length; //recogemos el total de campos equipo que hay para asignar los nuevos ID's
		newNode.appendChild(document.createElement('td'));   // creamos un td dentro de newNode
		
		var newField = document.createElement('input'); //creamos un elemento input
		newField.name = 'equipo'; //le asignamos un nombre al input creado
		
		var newEquipo = num_equipo + 1; // incrementamos el total de campos equipos para poder obtener un ID correlativo.

		newField.id = 'equipo'+newEquipo; //asignamos el nuevo ID al nuevo INPUT
		newNode.lastChild.appendChild(newField); //le indicamos de quien va a ser hijo.
		if(i<1){								//si es la primera vez insertamos un TD como separador
			newNode.appendChild(document.createElement('td'));  
			newNode.lastChild.appendChild(document.createTextN  ode('vs'));
		}
		puntero.parentNode.insertBefore(newNode,puntero);	//insertamos todos justo encima del tr con id nextMatch, almacenado en puntero.
	}

	if(newsInputs==1){//añadimos el link de borrar último partido
		newClose = document.createElement('a');
		newClose.id='delPartido';
		newClose.href='javascript:delMatch(this)';
		newClose.appendChild(document.createTextNode('Borr  ar último'));
		document.getElementById('controlMatch').appendChil  d(newClose);
	}
	centrarContenido();//centramos el contenido de los TD's para que queden bien alineados

}

function centrarContenido(){
	var y = document.getElementById('tableMatchs').rows;
	for(a=0;a<y.length;a++){
		y[a].align='center';
	}
}

function delMatch(){
	var total = document.getElementsByTagName("tr").length - 1;
	separador = document.getElementById("nextMatch"); 
	separador.parentNode.removeChild(separador.parentN  ode.childNodes[total]);
	newsInputs --;
	if (newsInputs==0){
		//retirar el código para borrar la última dirección de mail 
		document.getElementById("controlMatch").removeChild(document.getElementById("delPartido"));
	}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<form method="POST">
<table border="1" width="380" id="tableMatchs" cellspacing="2" cellpadding="1">
	<tr><td align="center"><INPUT TYPE="text" NAME="equipo" id="equipo1"></td><td width="10" align="center">vs</td><td align="center"><INPUT TYPE="text" NAME="equipo" id="equipo2"></td></tr>
	<tr><td align="center"><INPUT TYPE="text" NAME="equipo" id="equipo3"></td><td align="center">vs</td><td align="center"><INPUT TYPE="text" NAME="equipo" id="equipo4"></td></tr>
	<tr id="nextMatch"><td>-</td><td>-</td><td>-</td></tr>
</table>
<br>
<table border="1" width="380">
	<tr><td><center id="controlMatch"><a href="javascript:addMatch();">Añadir partido</a>&nbsp;&nbsp;&nbsp;&nbsp;</center></td></tr>
</table>
</form>
</body>
__________________
Señoooraaaa!! Que camisetas!!!

"Hay 10 tipos de personas, las que piensan en binario y las que no"
_________________________________
  #2 (permalink)  
Antiguo 07/02/2005, 09:33
Avatar de markshock  
Fecha de Ingreso: abril-2004
Ubicación: Allí, al fondo a la izqui
Mensajes: 316
Antigüedad: 20 años
Puntos: 0
alguna ayudita.. no se como solucionar este error.. llevo toda la mañana probando cosas pero nada, en IE no me va!!!
__________________
Señoooraaaa!! Que camisetas!!!

"Hay 10 tipos de personas, las que piensan en binario y las que no"
_________________________________
  #3 (permalink)  
Antiguo 08/02/2005, 03:01
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 2 meses
Puntos: 772
Hola markshock

Creo que esto servirá:
Código PHP:
<html>
<
HEAD>
<
SCRIPT LANGUAGE="JavaScript">
<!--
//
var newsInputs 0;
var 
defecto 4;
function 
addMatch(){
    var 
puntero document.getElementById('tableMatchs'); //recogemos donde van a ir los nuevos campos
    
newNode document.createElement('tr'); //creamos un elemento TR para poder agregar TD's
    
total 2//definimos cuantos inputs queremos insertar de un tiron
    
newsInputs++;
    for(
i=0;i<total;i++){
        var 
num_equipo document.getElementsByName('equipo').length//recogemos el total de campos equipo que hay para asignar los nuevos ID's
        
newNode.appendChild(document.createElement('td'));     // creamos un td dentro de newNode
        
        
var newField document.createElement('input'); //creamos un elemento input
        
newField.name 'equipo'//le asignamos un nombre al input creado
        
        
var newEquipo num_equipo 1// incrementamos el total de campos equipos para poder obtener un ID correlativo.

        
newField.id 'equipo'+newEquipo//asignamos el nuevo ID al nuevo INPUT
        
newNode.lastChild.appendChild(newField); //le indicamos de quien va a ser hijo.
        
if(i<1){                                //si es la primera vez insertamos un TD como separador
            
newNode.appendChild(document.createElement('td'));    
            
newNode.lastChild.appendChild(document.createTextNode('vs'));
        }
    
inicio=document.getElementById('nextMatch');
        
puntero.insertBefore(newNode,inicio);    //insertamos todos justo encima del tr con id nextMatch, almacenado en puntero.
    
}

    if(
newsInputs==1){//añadimos el link de borrar último partido
        
newClose document.createElement('a');
        
newClose.id='delPartido';
        
newClose.href='javascript:delMatch()';
        
newClose.appendChild(document.createTextNode('Borrar último'));
        
document.getElementById('controlMatch').appendChild(newClose);
    }
    
centrarContenido();//centramos el contenido de los TD's para que queden bien alineados

}

function 
centrarContenido(){
    var 
document.getElementById('tableMatchs').rows;
    for(
a=0;a<y.length;a++){
        
y[a].align='center';
    }
}

function 
delMatch(){
    var 
total document.getElementById('tableMatchs').getElementsByTagName("tr").length-2;
    
separador document.getElementById("tableMatchs");
    
separador.removeChild(separador.getElementsByTagName('tr')[total]);
    
newsInputs --;
    if (
newsInputs==0){
        
//retirar el código para borrar la última dirección de mail 
        
document.getElementById("controlMatch").removeChild(document.getElementById("delPartido"));
    }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<form method="POST">
<table border="1" width="380" cellspacing="2" cellpadding="1">
<tbody id="tableMatchs">
    <tr><td align="center"><INPUT TYPE="text" NAME="equipo" id="equipo1"></td><td width="10" align="center">vs</td><td align="center"><INPUT TYPE="text" NAME="equipo" id="equipo2"></td></tr>
    <tr><td align="center"><INPUT TYPE="text" NAME="equipo" id="equipo3"></td><td align="center">vs</td><td align="center"><INPUT TYPE="text" NAME="equipo" id="equipo4"></td></tr>
    <tr id="nextMatch"><td>-</td><td>-</td><td>-</td></tr>
</tbody>
</table>
<br>
<table border="1" width="380">
    <tr><td><center id="controlMatch"><a href="javascript:addMatch();">Añadir partido</a>&nbsp;&nbsp;&nbsp;&nbsp;</center></td></tr>
</table>
</form>
</body>
</html> 
Saludos,
  #4 (permalink)  
Antiguo 08/02/2005, 05:16
Avatar de markshock  
Fecha de Ingreso: abril-2004
Ubicación: Allí, al fondo a la izqui
Mensajes: 316
Antigüedad: 20 años
Puntos: 0
javierB, muchisimas gracias, de verdad, funciona genial. no se me ocurrio hacer eso...!!!

cuanto mas cuenta me doy de lo novato que soy mas aprendo...
__________________
Señoooraaaa!! Que camisetas!!!

"Hay 10 tipos de personas, las que piensan en binario y las que no"
_________________________________
  #5 (permalink)  
Antiguo 08/02/2005, 07:11
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 2 meses
Puntos: 772
Cita:
Iniciado por markshock
cuanto mas cuenta me doy de lo novato que soy mas aprendo...
A mi me ocurre al revés: cuanto más aprendo, más cuenta me doy de lo novato que soy

Me alegro de que te haya servido. Cuando tengas otro problema, ya sabes...
  #6 (permalink)  
Antiguo 08/02/2005, 08:59
Avatar de markshock  
Fecha de Ingreso: abril-2004
Ubicación: Allí, al fondo a la izqui
Mensajes: 316
Antigüedad: 20 años
Puntos: 0
eso mismo queria decir yo.. pero que me liao leñes... jejeje

si es que no se puede hacer mas de una cosa a la vez q no doy para mas.. ajajaja
__________________
Señoooraaaa!! Que camisetas!!!

"Hay 10 tipos de personas, las que piensan en binario y las que no"
_________________________________
  #7 (permalink)  
Antiguo 02/01/2007, 10:58
 
Fecha de Ingreso: enero-2007
Mensajes: 4
Antigüedad: 17 años, 3 meses
Puntos: 0
Re: Repaso al code de añadir inputs dynamicamente.

DISCULPEME VIEJO UN FAVORCITO COMO QUEDAN GUARDADAS LAS VARIABLES, COPIE EL CODIGO TAN CUAL Y LE AGREGUE, LO SIGUIENTE

</tbody>
</table>
<br>
<table border="1" width="380">
<tr><td><center id="controlMatch"><a href="javascript:addMatch();">Añadir partido</a>&nbsp;&nbsp;&nbsp;&nbsp;</center></td></tr>
</table>
<input value="GUARDAR" name="GUARDAR" onclick="" type="submit" class="button">
<?
echo "<li>equipo1->".$equipo;
echo "<li>newEquipo->".$newEquipo;
echo "<li>equipo3->".$equipo3;
echo "<li>equipo4->".$equipo4;
echo "<li>equipo5->".$equipo5;
echo "<li>equipo6->".$equipo6;
echo "<li>equipo7->".$equipo7;
echo "<li>equipo8->".$equipo8;
echo "<li>equipo9->".$equipo9;
echo "<li>equipo10->".$equipo10;
?>
</form>
</body>
</html>

SIN EMBARGO NO ME CARGA LOS VALORES DE LAS VARIABLES o estare imprimiendo mal muchas gracias cualquier ayuda msn karandrez arroba hotmail.com o karlosandrez arroba gmail.com GRACIAS
  #8 (permalink)  
Antiguo 02/01/2007, 13:26
Avatar de markshock  
Fecha de Ingreso: abril-2004
Ubicación: Allí, al fondo a la izqui
Mensajes: 316
Antigüedad: 20 años
Puntos: 0
Re: Repaso al code de añadir inputs dynamicamente.

lo que has de hacer, es meter en un campo oculto todas los valores de los inputs andes de enviarlo por submit... una vez haces el envio por submit debes recoger el campo oculto... xq para el php es como si no existieran los campos que has creado dinamicamente... entiendes?

básicamente viene a ser eso.. si tienes cualquier otra duda no temas en consultarmelo.

;)
__________________
Señoooraaaa!! Que camisetas!!!

"Hay 10 tipos de personas, las que piensan en binario y las que no"
_________________________________
  #9 (permalink)  
Antiguo 10/02/2007, 10:39
 
Fecha de Ingreso: enero-2007
Mensajes: 4
Antigüedad: 17 años, 3 meses
Puntos: 0
Sonrisa Re: Repaso al code de añadir inputs dynamicamente.

Ok Muchas Gracias Por La Ayuda...
  #10 (permalink)  
Antiguo 26/11/2007, 17:13
 
Fecha de Ingreso: noviembre-2007
Mensajes: 2
Antigüedad: 16 años, 5 meses
Puntos: 0
Re: Repaso al code de añadir inputs dynamicamente.

Hola necesito de su ayuda urgentemente...

ya cheque su codigo y esta genial, solo necesito saber si puedo meter los texfields con propiedades, como: maxlenght, size, etc. pero que lo siga haciendo dinamicamente

es que necesito agregar lineas dinamicamente pero los texfields son de tamaños determinados osea mas pequeños jeje
  #11 (permalink)  
Antiguo 26/11/2007, 17:30
 
Fecha de Ingreso: noviembre-2007
Mensajes: 2
Antigüedad: 16 años, 5 meses
Puntos: 0
Re: Repaso al code de añadir inputs dynamicamente.

se me olvido decirles que necesito meter tres texfields y luego dos no y luego otros dos si y asi sucesivamente

ayuda por favor....
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 15:37.