Iniciar sesión
Crear cuenta
Crear cuentaCrear cuenta
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Combo con campos condicionales</title>
<style type="text/css">
* { padding:0px; margin:0px; }
body { font-family: arial, sans-serif; }
.container { max-width:500px; margin:auto; }
.comboSelector { background-color:#f44336; padding:30px; }
select#tipo { padding:5px 10px; }
.opcionesWrapper { background-color:#311b92; padding:20px 30px; color:#FFF; }
.opciones { display:none; }
.btn { border:none; padding:10px 20px; color:#FFF; background-color:#f44336; margin-top:20px; cursor:pointer; }
.btn:hover { background-color:#b71c1c; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="comboSelector">
<select name="tipo" id="tipo" onchange="elegir_opcion(this);" style="width: 219px; height: 30px">
<option value="">Elije un Cuento</option>
<option value="op1">Caperucita Roja</option>
<option value="op2">Pulgarcito</option>
<option value="op3">Tipo 3</option>
</select>
</div>
<div class="opcionesWrapper">
Ahora cubre los datos que se te piden abajo </div>
</div>
<div class="opciones">
<div id="op1">
<form>
Como te llamas? <input class="input" id="entrada2" onkeyup="javascript:{UI=document.getElementById('entrada2').value;
document.getElementById('ejemplo2').innerHTML=' '+UI;}" />
<br>
<p>Donde Vives? <input type="text" size="30" name="ciudad" /><br>
Cuantos años tienes? <input type="text" size="10" name="niño" /><br>
Como se llama tu mascota? <input type="text" size="10" name="mascota" /><br>
<br><br />
</p>
<p>Era se , una vez, un niño que se llamaba<div style="color:white;font-size:16px;" id='ejemplo2'></div>, este niño vivia
en una ciudad muy bonita, esta ciudad era #ciudad#. Todavia era muy
pequeño solo tenia #años# y por eso tenia mucho miedo a los lobos,
una vez, la madre de una niña de #ciudad# la mando a casa de su
abuelita ........... etc etc.</p>
<input type="submit" name="submit" value="ENVIAR" class="btn" />
</form>
</div>
<div id="op2">
<form>
<table style="width: 465px; height: 144px;">
<tr>
<td style="width: 177px; height: 140px;" valign="top">
<p class="style2" style="height: 140px">Como te llamas?<br>
Donde vives?<br>
Cuantos años tienes?<br>
Como se llama Papa?<br>
Como se llama Mama?</p>
</td>
<td style="height: 140px" valign="top">
<p class="style2" style="height: 140px">
<input type="text" size="30" name="niño" required="required" /><br />
<input type="text" size="30" name="ciudad" required="required" /><br />
<input type="text" size="10" name="años" required="required" /><br />
<input type="text" size="10" name="papa" required="required" /><br />
<input type="text" size="20" name="mama" required="required" /></p>
</td>
</tr>
</table>
<br><br />
<p>texto del cuento pulgarcito....</p>
<input type="submit" name="submit" value="ENVIAR" class="btn" />
</form>
</div>
</div>
<script type="text/javascript">
function elegir_opcion(combo) {
$tipo = jQuery(combo).val();
$campos = jQuery("#"+$tipo).html();
jQuery(".opcionesWrapper").html($campos);
}</script>
</body>
</html>
<div style="color:white;font-size:16px;" id='ejemplo2'></div>
<span style="color:white;font-size:16px;" id='ejemplo2'></span>
