Foros del Web » Programando para Internet » Javascript »

Radio Buttons dinámicos

 Estas en el tema de Radio Buttons dinámicos en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/03/2014, 08:08
 
Fecha de Ingreso: febrero-2008
Mensajes: 18
Antigüedad: 16 años, 10 meses
Puntos: 0
Pregunta Radio Buttons dinámicos
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,
  #2 (permalink)  
Antiguo 07/03/2014, 09:12
 
Fecha de Ingreso: febrero-2008
Mensajes: 18
Antigüedad: 16 años, 10 meses
Puntos: 0
Respuesta: Radio Buttons dinámicos
Perdón por el doble post, pero no me dejó editar.

Les paso el código un poco más limpio que el de arriba, en el otro habían funciones que hacían lo mismo y creaciones de input sin sentido:

Código HTML:
<html> 
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;" />
<script type="text/javascript">
 
icremento = 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 opción direct del radioButton
  radioButton1 = document.createElement('input');
  radioButton1.type = 'radio';
  radioButton1.name = 'radio'+icremento;
  radioButton1.value = 'Direct';
  
  //Creo opción mirror del radioButton
  radioButton2 = document.createElement('input');
  radioButton2.type = 'radio';
  radioButton2.name = 'radio'+icremento;
  radioButton2.value = 'Mirror';
  
  //Creo opción alternative del radioButton
  radioButton3 = document.createElement('input');
  radioButton3.type = 'radio';
  radioButton3.name = 'radio'+icremento;
  radioButton3.value = 'Alternative';
  
  //Creo textbox download
  buttonDownload = document.createElement('input');
  buttonDownload.type = 'text';
  buttonDownload.name = 'div'+icremento;
  buttonDownload.size = '10';
  buttonDownload.id = 0;
  
  //Creo textbox mirror
  buttonMirror = document.createElement('input');
  buttonMirror.type = 'text';
  buttonMirror.name = 'div'+icremento;
  buttonMirror.size = '20';
  buttonMirror.id = 0;
  
  //Creo textbox alternative
  buttonAlternative = document.createElement('input');
  buttonAlternative.type = 'text';
  buttonAlternative.name = 'div'+icremento;
  buttonAlternative.size = '30';
  buttonAlternative.id = 0;
  
  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, buttonDownload, buttonMirror, buttonAlternative)
  
  radioButton1.onclick = function(){radioCheck(bundle, buttonDownload, buttonMirror, buttonAlternative)}
  radioButton2.onclick = function(){radioCheck(bundle, buttonDownload, buttonMirror, buttonAlternative)}
  radioButton3.onclick = function(){radioCheck(bundle, buttonDownload, buttonMirror, buttonAlternative)}
}

function radioCheck(bundle, buttonDownload, buttonMirror, buttonAlternative)
{	
	if(radioButton1.checked == true)
	{
		console.log("radioButton1 = true");
		createOrRemove(bundle,buttonDownload,"remove");
		createOrRemove(bundle,buttonMirror,"remove");
		createOrRemove(bundle,buttonAlternative,"remove");
		createOrRemove(bundle,buttonDownload,"create");
	}
	  
	if(radioButton2.checked == true)
	{
		console.log("radioButton2 = true");
		createOrRemove(bundle,buttonMirror,"remove");
		createOrRemove(bundle,buttonDownload,"remove");
		createOrRemove(bundle,buttonAlternative,"remove");
		createOrRemove(bundle,buttonMirror,"create");
	}
	  
	if(radioButton3.checked == true)
	{
		console.log("radioButton3 = true");
		createOrRemove(bundle,buttonAlternative,"remove");
		createOrRemove(bundle,buttonDownload,"remove");
		createOrRemove(bundle,buttonMirror,"remove");
		createOrRemove(bundle,buttonAlternative,"create");
	}
}

function createOrRemove(bundleParam,elem,createOrRemove)
{	
	if(createOrRemove == "create")
	{
		elem.id = 1;
		bundleParam.appendChild(elem);
		console.log("Crea textbox");
	}
	else
	{
		if(elem.id == 1)
		{
			bundleParam.removeChild(elem);
			elem.id = 0;
			console.log("Borra textbox");
		}
	}
}

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>
De todas formas, sigue pasando lo mismo.

Etiquetas: formulario, funcion, html, input, radio
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 19:54.