Buenas,
Recurro nuevamente a ustedes, porque no logro dar con lo que quiero hacer. Primero que nada, el código que expongo a continuación sé que no está bien hecho y además, seguramente hayan otras maneras más fáciles y con mejor rendimiento que la que hice, por eso quería pedirles ayuda al respecto.
La idea original es, a partir de este formulario, al darle al botón crear, tengo un textbox, un textarea y un radio button, este último es el problema. La idea es seleccionar alguna de las opciones del radio y mostrar justo debajo un textbox diferente (en realidad, dependiendo de cuál elija, crea dos o más textbox, pero para el caso, lo hice únicamente con uno donde difere solo el size para simplificar las cosas, por eso no usé un único textbox) y a la vez eliminar si es que hay, algún textbox al haber seleccionado previamente alguna otra opción del radio, es decir, cualquiera de las opciones que elija, tiene que limpiar todo lo que haya justo debajo y poner un textbox específico, así con cada una de las opciones. Para ello hice lo siguiente, creé una función para el onclick de cada opción del radio, adentro de ella, valido si el "checked" es "true", de ser así, adentro llama a una función que primero limpia todo y luego crea el textbox. Sería eso a modo resumen.
Primero y principal, funciona, sí, quizás no de la mejor manera, pero el problema se presenta cuando intento generar más de un conjunto de elementos, en resumen, si apreto el botón "Agregar" una vez, funciona, si lo apreto una segunda vez o más veces no, eso es seguramente a que hay un conflicto en el removeChild y appendChild al querer acceder a los elementos creados como: buttonDownload, buttonMirror o buttonAlternative. Seguramente están queriendo acceder al mismo o se están mezclando entre una selección u otra, pero no logro dar con la solución. Traté de crear contadores secuenciales (sé que no es prolijo, lo admito) para saber adónde accede y no entre por otro lado. Además, antes había hecho por ejemplo un "buttonAlternative = null;" porque a pesar de la validación del objeto undefined o null, entraba, eso es seguramente porque lo borraba del form, pero no el objeto en sí, entonces no encontraba forma de validarlo.
¿Me podrían ayudar a solucionarlo? O en todo caso, otra manera más factible y sencilla de hacer los radio button como quiero tenerlos.
Código HTML:
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;" />
<script type="text/javascript">
icremento = 0;
i1 = 0;
i2 = 0;
i3 = 0;
function create(obj)
{
var unformatLinks = document.createTextNode('textArea');
var radioButtonText1 = document.createTextNode('Link');
var radioButtonText2 = document.createTextNode('Mirror');
var radioButtonText3 = document.createTextNode('Alternative');
icremento++;
downloads = document.getElementById('downloads');
bundle = document.createElement('div');
bundle.id = 'div'+icremento;
downloads.appendChild(bundle);
//Creo el textBox
button = document.createElement('input');
button.type = 'text';
button.name = 'buttonTitle'+'[]';
button.size = '80';
//Creo el textArea
textArea = document.createElement('textarea');
textArea.type = 'textarea';
textArea.name = 'unformatLinks'+'[]';
textArea.cols = '65';
textArea.rows = '5';
//Creo el radioButton
radioButton1 = document.createElement('input');
radioButton1.type = 'radio';
radioButton1.name = 'radio'+icremento;
radioButton1.value = 'Direct';
radioButton1.id = icremento;
radioButton2 = document.createElement('input');
radioButton2.type = 'radio';
radioButton2.name = 'radio'+icremento;
radioButton2.value = 'Mirror';
radioButton2.id = icremento;
radioButton3 = document.createElement('input');
radioButton3.type = 'radio';
radioButton3.name = 'radio'+icremento;
radioButton3.value = 'Alternative';
radioButton3.id = icremento;
bundle.textContent = "Título: ";
bundle.appendChild(button);
bundle.appendChild(document.createElement('br'));
bundle.appendChild(document.createElement('br'));
bundle.appendChild(unformatLinks);
bundle.appendChild(document.createElement('br'));
bundle.appendChild(document.createElement('br'));
bundle.appendChild(textArea);
bundle.appendChild(document.createElement('br'));
bundle.appendChild(document.createElement('br'));
bundle.appendChild(radioButtonText1);
bundle.appendChild(radioButton1);
bundle.appendChild(radioButtonText2);
bundle.appendChild(radioButton2);
bundle.appendChild(radioButtonText3);
bundle.appendChild(radioButton3);
bundle.appendChild(document.createElement('br'));
bundle.appendChild(document.createElement('br'));
radioButton1.checked = true;
radioCheck(bundle)
radioButton1.onclick = function(){radioCheck(bundle)}
radioButton2.onclick = function(){radioCheck(bundle)}
radioButton3.onclick = function(){radioCheck(bundle)}
}
function radioCheck(bundle)
{
if(radioButton1.checked == true)
{
console.log("radioButton1 = true");
createOrRemoveButtonDownload(bundle,"remove");
createOrRemoveButtonMirror(bundle,"remove");
createOrRemoveButtonAlternative(bundle,"remove");
createOrRemoveButtonDownload(bundle,"create");
}
if(radioButton2.checked == true)
{
console.log("radioButton2 = true");
createOrRemoveButtonMirror(bundle,"remove");
createOrRemoveButtonDownload(bundle,"remove");
createOrRemoveButtonAlternative(bundle,"remove");
createOrRemoveButtonMirror(bundle,"create");
}
if(radioButton3.checked == true)
{
console.log("radioButton3 = true");
createOrRemoveButtonAlternative(bundle,"remove");
createOrRemoveButtonDownload(bundle,"remove");
createOrRemoveButtonMirror(bundle,"remove");
createOrRemoveButtonAlternative(bundle,"create");
}
}
function createOrRemoveButtonDownload(bundleParam,createOrRemove)
{
if(createOrRemove == "create")
{
buttonDownload = document.createElement('input');
buttonDownload.type = 'text';
buttonDownload.name = 'div'+icremento;
buttonDownload.size = '10';
buttonDownload.id = icremento;
i1 = icremento;
//Creo un textBox descarga
bundleParam.appendChild(buttonDownload);
console.log("Crea buttonDownload");
}
else
{
if(icremento == i1)
{
if((typeof buttonDownload != "undefined") && (buttonDownload != null) && (buttonDownload.id != 0))
{
bundleParam.removeChild(buttonDownload);
buttonDownload.id = 0;
//buttonDownload = null;
console.log("Borra buttonDownload");
}
}
}
}
function createOrRemoveButtonMirror(bundleParam,createOrRemove)
{
if(createOrRemove == "create")
{
buttonMirror = document.createElement('input');
buttonMirror.type = 'text';
buttonMirror.name = 'div'+icremento;
buttonMirror.size = '20';
buttonMirror.id = icremento;
i2 = icremento;
//Creo un textBox mirror
bundleParam.appendChild(buttonMirror);
console.log("Crea buttonMirror");
}
else
{
if(icremento == i2)
{
if((typeof buttonMirror != "undefined") && (buttonMirror != null) && (buttonMirror.id != 0))
{
bundleParam.removeChild(buttonMirror);
//buttonMirror = null;
buttonMirror.id = 0;
console.log("Borra buttonMirror");
}
}
}
}
function createOrRemoveButtonAlternative(bundleParam,createOrRemove)
{
if(createOrRemove == "create")
{
buttonAlternative = document.createElement('input');
buttonAlternative.type = 'text';
buttonAlternative.name = 'div'+icremento;
buttonAlternative.size = '30';
i3 = icremento;
buttonAlternative.id = icremento;
//Creo un textBox alternative
bundleParam.appendChild(buttonAlternative);
console.log("Crea buttonAlternative");
}
else
{
if(icremento == i3)
{
if((typeof buttonAlternative != "undefined") && (buttonAlternative != null) && (buttonAlternative.id != 0))
{
bundleParam.removeChild(buttonAlternative);
//buttonAlternative = null;
buttonAlternative.id = 0;
console.log("Borra buttonAlternative");
}
}
}
}
function transform()
{
var imageMain = document.form.imageMain.value;
//document.write(imageMain);
var preview = document.form.preview.value;
//document.write(preview);
var review = document.form.review.value;
//document.write(imageMain + "</br>" + preview + "</br>" + review);
}
</script>
</head>
<body>
<font face="calibri">
<form name="form">
<fieldset id="downloads" style="width:638px"></br>
<input type="button" value="Agregar" onclick="create(this)"></br></br>
</fieldset>
</br>
<input type=button value="Aceptar" onclick="transform()">
</form>
</font>
</body>
</html> En realidad el código no es tan largo, algunas son simplemente funciones "recicladas", por eso decía que está hecho de la manera más prolija, quizás hasta se podría haber hecho una función en lugar de las tres por cada opción del radio button.
Por favor, si tienen alguna duda o no logré hacerme entender, me avisan y trataré de ser lo más claro posible o explicarlo de otra manera.
Muchas gracias,