Nuevos Elementos

isc_seeker · #1 (**permalink**) 25/08/2011, 13:56

Hola amigos de ForosdelWeb:

Resulta que tengo una caja de texto y dos check box para SI y NO... y quisiera hacer un boton para agregar mas de estos elementos conforme sean necesarios, ES DECIR, que al momento de darle al boton "Agregar Elementos" me agregue otra caja de texto y otros dos check box

saludos de antemano y gracias !

lordglazoon · #2 (**permalink**) 25/08/2011, 14:13

busca información sobre DOM: createElement,appendChild

isc_seeker · #3 (**permalink**) 25/08/2011, 14:19

Cita:

Iniciado por lordglazoon

busca información sobre DOM: createElement,appendChild

algún ejemplo que me pudieras patrocinar ?

laratik · #4 (**permalink**) 25/08/2011, 14:19

Hola isc_seeker, Siempre existen dos opciones, con innerHTML

Código Javascript:

Ver originalfunction newElement() {
    document.getElementById("form").innerHTML = document.getElementById("form").innerHTML+'<br/><input type="text" /> SI <input type="checkbox" value="si" /> NO <input type="checkbox" value="no" />';
}

o como bien dice lordglazoon con DOM

Código Javascript:

Ver originalfunction newDOM() {
    var text = document.createElement("input");
    text.type = "text";
    var si = document.createTextNode(" SI ");
    var no = document.createTextNode(" NO ");
    var check1 = document.createElement("input");
    check1.type = "checkbox";
    var chack2 = check1.cloneNode(true);
    check1.value = "si";
    check2.value = "no";
    document.getElementById("form").appendChild(document.createElement("br"));
    document.getElementById("form").appendChild(text);
    document.getElementById("form").appendChild(si);
    document.getElementById("form").appendChild(check1);
    document.getElementById("form").appendChild(no);
    document.getElementById("form").appendChild(check2);
}

Código HTML:

<form action="prueba.php" method="post" id="form">
	<input type="text" /> SI <input type="checkbox" value="si" /> NO <input type="checkbox" value="no" /><input type="button" value="Agregar" onclick="newElement()" />
</form>

Espero que sea lo que estas buscando.

isc_seeker · #5 (**permalink**) 25/08/2011, 22:09

ok, así quedó mi resultado final:

Código HTML:

Ver original<html>
<head></head>
<body>
<a href="javascript:crear();"><input type="button" value="Nuevos Campos"></a>
 
<div id="content_create_box"></div>
 
<script type="text/javascript">
 
function crear(){
 
var div = document.getElementById("content_create_box");
 
var cajaTxt = document.createElement("input");
cajaTxt.type="text";
cajaTxt.value="Text Box!";
 
var radio = document.createElement("input");
radio.type="radio";
radio.name="radio1";
radio.value="some";
 
var check = document.createElement("input");
check.type="checkbox";
check.name="check1";
check.value="some2";
 
div.appendChild(cajaTxt);
div.appendChild(radio);
div.appendChild(check);
 
}
</script>
 
</body>
</html>

pero ahora necesito que me de un salto de linea entre cada fila de elementos, es decir, cada vez que quiera crear Caja de Texto - Radio - Check, me de un salto de linea

intente con <br> en varios lugares del documento, pero creo que se trata de mezclar html con Javascript y por mas que no hago, no puedo :( ayuda por fas

isc_seeker · #6 (**permalink**) 26/08/2011, 09:22

me ha salido un problema de ultimo momento... en mi codigo anterior, le doy al boton Nuevos Campos y me hace una caja de texto y dos radio button... hasta ahí todo bien, pero cuando selecciono un radio button, me doy cuenta de que puedo seleccionar el otro también :( y no obstante, cuando creo otros campos nuevos, es decir, otra caja de texto y otros dos radio button, y selecciono los dos radio buton, me borra la selección anterior... alguna solución a esta enigmática ?

isc_seeker · #7 (**permalink**) 26/08/2011, 10:03

Cita:

Iniciado por laratik

Hola isc_seeker, Siempre existen dos opciones, con innerHTML

Código Javascript:

Ver originalfunction newElement() {
    document.getElementById("form").innerHTML = document.getElementById("form").innerHTML+'<br/><input type="text" /> SI <input type="checkbox" value="si" /> NO <input type="checkbox" value="no" />';
}

o como bien dice lordglazoon con DOM

Código Javascript:

Ver originalfunction newDOM() {
    var text = document.createElement("input");
    text.type = "text";
    var si = document.createTextNode(" SI ");
    var no = document.createTextNode(" NO ");
    var check1 = document.createElement("input");
    check1.type = "checkbox";
    var chack2 = check1.cloneNode(true);
    check1.value = "si";
    check2.value = "no";
    document.getElementById("form").appendChild(document.createElement("br"));
    document.getElementById("form").appendChild(text);
    document.getElementById("form").appendChild(si);
    document.getElementById("form").appendChild(check1);
    document.getElementById("form").appendChild(no);
    document.getElementById("form").appendChild(check2);
}

Código HTML:

<form action="prueba.php" method="post" id="form">
	<input type="text" /> SI <input type="checkbox" value="si" /> NO <input type="checkbox" value="no" /><input type="button" value="Agregar" onclick="newElement()" />
</form>

Espero que sea lo que estas buscando.

si me ayudó, pero no lo pude hacer funcionar... como quedaría estructurado el código ya así al final ???

laratik · #8 (**permalink**) 26/08/2011, 11:58

Cita:

Iniciado por isc_seeker

me ha salido un problema de ultimo momento... en mi codigo anterior, le doy al boton Nuevos Campos y me hace una caja de texto y dos radio button... hasta ahí todo bien, pero cuando selecciono un radio button, me doy cuenta de que puedo seleccionar el otro también :( y no obstante, cuando creo otros campos nuevos, es decir, otra caja de texto y otros dos radio button, y selecciono los dos radio buton, me borra la selección anterior... alguna solución a esta enigmática ?

Recuerda que para crear un sistema de radio buttons todos estos deben tener el mismo nombre, si poseen nombres diferentes sera un sistema completamente diferente, acerca de tu anterior pregunta acerca del br, dentro de mi ejemplo te pongo:

Código Javascript:

Ver originaldocument.getElementById("form").appendChild(document.createElement("br"));

Esta linea lo que hace es crear una etiqueta <br/> e inmediatamente asiganarla al form. Prueba con lo siguiente:

Código HTML:

<html>
<head></head>
<body>
<a href="javascript:crear();"><input type="button" value="Nuevos Campos"></a>
<div id="content_create_box"></div>

<script type="text/javascript">
var i = 0;
function crear(){
var div = document.getElementById("content_create_box");

var cajaTxt = document.createElement("input");
cajaTxt.type="text";
cajaTxt.value="Text Box!";

var radio = document.createElement("input");
radio.type="radio";
radio.name="radio"+i;
radio.value="some";

var check = document.createElement("input");
check.type="radio";
check.name="radio"+i;
check.value="some2";
i++;
div.appendChild(document.createElement("br"));
div.appendChild(cajaTxt);
div.appendChild(radio);
div.appendChild(check);

}
</script>

</body>
</html>

Espero que te sirva de ayuda.