generar <input="text".. mediante DOM..

markshock · #1 (**permalink**) 01/08/2005, 09:49

Hola,

Necesito crear unas funciones para poder añadir textfields a un formulario, usando un boton (llamado "mas campos") para insertar tantos textfields como veces se cliquee..

HAce un tiempo estube leyendo unos posts referentes a ello en este foro pero no he conseguido encontrarlos...

Si alguien puede hecharme un cable, lo agradecería un monton.

Gracias!!!

SiR.CARAJ0DIDA · #2 (**permalink**) 01/08/2005, 11:52

var o = document.createElement('input');
o.type = "text";
o.name = "lalala";
o.value = "";
document.getElementById('algun_elemento').appendCh ild(o);

guiweb · #3 (**permalink**) 01/08/2005, 12:25

Sabes, esta es exactamente la misma duda que tengo yo, pero de JAVASCRIPT no se NADA, porfavor si puedieras colocar esta respuesta tipo copiar y pergar y comprobar su funcionamiento te lo agradeceria, disculpa que te pida esto, pero en pedir no hay engaños muchas gracias

SiR.CARAJ0DIDA · #4 (**permalink**) 01/08/2005, 13:10

Código PHP:

  <html> 
<head> 
    <script type="text/javascript"> 
        function agregar() 
        { 
            var o = document.createElement('input'); 
            o.type = "text"; 
            o.name = "lalala"; 
            o.value = ""; 
            document.getElementById('padre').appendChild(o); 
        } 
    </script> 
</head> 
 
<body> 
<div id="padre"></div> 
<input type="button" value="Agregar" onclick="agregar()"> 
</body> 
</html>

guiweb · #5 (**permalink**) 01/08/2005, 16:04

Muchisimas Gracias Lo Pruebo Y Te Cuento ;)

Hereje · #6 (**permalink**) 01/08/2005, 16:54

ese código es estandar ?

no deberia ser con createAttribute, etc ?

ta luego!

guiweb · #7 (**permalink**) 01/08/2005, 17:00

No lo se, si tu sabes, porfavor ayudanos GRACIAS

markshock · #8 (**permalink**) 02/08/2005, 02:07

Quizas os sirva este tutorial que he encontrado:

http://pantera.itchihuahua.edu.mx/ap...f=lp6_22#page0

Gracias a todos.

markshock · #9 (**permalink**) 02/08/2005, 02:32

Una referencia:

http://www.mozilla.org/docs/dom/domref/dom_shortIX.html

markshock · #10 (**permalink**) 02/08/2005, 02:50

Llevo 2 horas intentando que me inserte campos de formulario ... y que despues mediante otro boton borrarlos... y no hay manera... grrrr!!!

El código que he de crear es el siguiente...

Código:

<head>
</head>
<table border="1" id="padre">
	<tr id="separar"><td colspan="3">Día 1</td></tr>
	<tr>
		<td><input type="text" name="dia1"></td><td width="20"> - </td><td><input type="text" name="dia2"></td>
	</tr>
	<tr id="vacio"><td colspan="3"></td></tr>
</table>

<input type="button" name="addNew" value="Añadir día" onclick="agregar();">

Necesito un boton de agregar, para que agregue 2 campos.. 1 para hora inicio y otro seguido para hora fin...

Es para que el usuario pueda agregar mas de un día a un evento...

A ver si alguien se aburre y me hecha un HAND... GRACIAS!!!

markshock · #11 (**permalink**) 02/08/2005, 03:20

tema solucionado, ya tengo el aplicativo...

para quien quiera mirarselo... (seguramente se pueda simplificar pero es mi primer script con DOM)

Este code lo he hecho para agregar partidos a 1 campeonato.

Código:

<html>
<head>

<script language="JavaScript">
<!--//
var newsInputs = 0;
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++;

	newNode.appendChild(document.createElement('td'));       // creamos un td dentro de newNode
	newNode.lastChild.appendChild(document.createTextNode('Game '+(total+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 y = 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="0" width="380" cellspacing="2" cellpadding="0">
<tbody id="tableMatchs">
  <tr>
		<td width="40">Game 1</td>
		<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>Game 2</td>
		<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><img src="clear_pixel.gif" width="1" height="1" border="0"></td>
		<td><img src="clear_pixel.gif" width="1" height="1" border="0"></td>
		<td><img src="clear_pixel.gif" width="1" height="1" border="0"></td>
		<td><img src="clear_pixel.gif" width="1" height="1" border="0"></td>
	</tr>
</tbody>
</table>
<br>
<table border="0" width="380" cellspacing="0" cellpadding="0">
    <tr><td><center id="controlMatch"><a href="javascript:addMatch();">Añadir partido</a>&nbsp;&nbsp;&nbsp;&nbsp;</center></td></tr>
</table>
</form>
</body>
</html>

Soy juan palomo, yo me lo guiso yo me lo como xD xD xD

guiweb · #12 (**permalink**) 02/08/2005, 07:29

Muchas Gracias Probando ojala funciones GRACIAS

----------------------------------------------------------

EDIT

Sabes copie y pegue tu ejemplo, no me sirvio, ya que arroja errores, podrias porfavor revisar el codigo?? Gracias

markshock · #13 (**permalink**) 02/08/2005, 08:24

hemm.. ese código funciona perfectamente por que es el que estoy usando... mira que te quede bien tabulado en el editor...

guiweb · #14 (**permalink**) 02/08/2005, 09:03

Disculpa pero yo de Javascrip no se nada....
es tan importante el tema del TABULADO????'

------------------------------------------------
EDIT

NO definitivamente no funciona, lo copie, pegue..... lo guarde como index.htm, lo subi al servidor, y lo estoy viendo con IE. 6.0 y me arroja errores.

SiR.CARAJ0DIDA · #15 (**permalink**) 02/08/2005, 09:13

hay palabras que se separaron por la mitad en el codigo que posteo, error del foro debe ser. fijate eso...

guiweb · #16 (**permalink**) 02/08/2005, 10:15

Revisando.....
--------------------------------
EDIT
TIENES TODA LA SANTA RAZON :D ahora si, arregle todos los espacios, que son como 8 y todo funciono perfectamente :D

muchas Gracias :D voy a probar que haga lo que yo necesite y les cuento...

GRACIAS

guiweb · #17 (**permalink**) 02/08/2005, 10:28

Una consulta con respecto al codigo.....
cuando cree un nuevo textbox... cual sera el nombre??? ya que necesito enviar los datos que de este recoja a una base de datos y no me quedo claro el newField.name = 'equipo', ya que segun esto.... todos los campos se llamarian equipo???? estoy en lo correcto????
o bien con PHP cual seria el modo correcto de recuperar los valores que yo introduzca en los nuevos textBox ???

markshock · #18 (**permalink**) 03/08/2005, 03:16

mira en la linea donde pone " newField.name="equipo" "

Todos los campos se llamarán equipo... pero para PHP.. debrias de ponerle "equipo[]" si no recuerdo mal, para que te devuelva un array con todos los nombres que has insertado en los textfield...

DUDO_DE_ADRIANA · #19 (**permalink**) 04/08/2005, 08:47

Ah muy interesante............y como haríais el Insert en la base de datos siendo éste un formulaio dinamico ???

Ese es el paso que sigue no ???

mario2005 · #20 (**permalink**) 04/08/2005, 09:21

Si quieres nos mandas el código, te hacemos la aplicación y luego tu te embolsas las pelas,jejeje. No nos pasemos por favor, esto es un foro de ayuda, dudas puntuales, etc, etc. No nos pasemos, para otra cosas están los libros, tutoriales, manuales y las horas y horas delante del PC devananadose los sesos.