Ver Mensaje Individual
  #1 (permalink)  
Antiguo 09/04/2015, 14:52
Avatar de Suarsan
Suarsan
 
Fecha de Ingreso: marzo-2015
Mensajes: 45
Antigüedad: 9 años, 1 mes
Puntos: 0
Duda con formulario dinamico

Tengo un formulario que contiene un select. Tengo también un script javascript que detecta si selecciono una opción diferente a la que muestra por defecto el select. Hasta aquí todo bien.

Ahora, debajo de ese select tengo un botón que añade otro select exactamente igual debajo del primero (y así sucesivamente). Y aquí es donde viene el problema, el código javascript parece que "pasa" de escuchar a estos nuevos select creados dinámicamente.. Solo escucha los cambios en el primer select creado directamente en el HTML. Os enseño el código a ver si podeis ayudarme. Gracias!!

Codigo HTML
Código:
<div class="container-fluid">
	<section class="row main">
		<article class="col-xs-12">
			<form class="form-inline" action="asistente_enviar.php" method="post">
				<div id="cajonprincipal">
					<div id="cajon1" class="form-group">
						<input id="pregunta1" class="form-control" type="text" placeholder="¿Vas a?">
						<select id="select" class="form-control" name="select1" >
  							<option value="0" selected>Si/No</option> 
  							<option value="2">2 opciones a elegir</option>
  							<option value="3">3 opciones a elegir</option>
						</select>
					</div>
				</div>
				<button class="form-control" type="button" id="botonmas" onclick="addFields()">Añadir</button>
				<input class="form-control btn btn-primary" type="submit" value="Terminar y rellenar"/>
			</form>		
		</article>
	</section>
</div>
Javascript para detectar cuando selecciono otra opcion
Código:
       $('select#select').on('change',function(){
    			var valor = $(this).val();
    			var idaux = $(this).parent().attr("id");
    			//alert(idaux);
    			var container = document.getElementById();
    			for(i=0;i<valor;i++){
    				var input = document.createElement("input");
               	         	input.id = "Opcion"+(i+1);
                		input.className = "form-control";
               			input.type = "text";
               			input.placeholder = "Editar opcion"+(i+1);
               			container.appendChild(input);
    			}
	});
Javascript para añadir input y select desde el boton añadir
Código:
n=1;
function addFields(){
            n++;
           
            var cajon = document.createElement("div");
            cajon.id = "cajon"+n;
            cajon.className = "form-group";
            cajonprincipal.appendChild(cajon);

            var input = document.createElement("input");
            input.id = "pregunta"+n;
            input.className = "form-control";
            input.type = "text";
            input.placeholder = "Editar pregunta "+n;
            cajon.appendChild(input);
            
            var select = document.createElement("select");
            select.id="select";
            select.className = "form-control";
            select.name = "select";
            cajon.appendChild(select);
            
            var op1 = document.createElement("option");
            op1.value = ("0");
            op1.text = ("Si/No");
            select.appendChild(op1);
            var op2 = document.createElement("option");
            op2.value = ("2");
            op2.text = ("2 opciones a elegir");
            op2.selected = "selected";
            select.appendChild(op2);
            var op3 = document.createElement("option");
            op3.value = ("3");
            op3.text = ("3 opciones a elegir");
            select.appendChild(op3);
}