Hola
gaspampera y
rrnieto:
Otra opción es mantener una capa oculta con las cuatro opciones, y cuando deseemos mostrarlas. Nos dejamos de incómodos popups... Te paso un ejemplo tonto:
Código PHP:
<script type="text/javascript">
<!--
// document.getElementById abreviado
function $(x) { return document.getElementById(x); }
function mostrarOpciones() {
$('opciones').style.display = "block";
$('opcionElegida').innerHTML = "";
}
function seleccionarOpcion(opt) {
switch( opt.id ) {
case "campo": txt = "Al campo."; break;
case "playa": txt = "A la playa."; break;
case "montanya": txt = "A la montaña."; break;
case "ninguno": txt = "A ningún sitio."; break;
}
$('opcionElegida').innerHTML = txt;
$('opciones').style.display = "none";
}
function confirmaDatos(fr) {
if( fr.nombre.value!=="" && $("opcionElegida").innerHTML!=="" && fr.edad.value!=="" ) {
var str = "Tu nombre es "+fr.nombre.value+"\n";
str += "Quieres viajar: "+$("opcionElegida").innerHTML+"\n";
str += "Tu edad: "+fr.edad.value;
return window.confirm(str);
}
else {
alert("¡Datos incompletos!");
return false;
}
}
// -->
</script>
<form onsubmit="return confirmaDatos(this)">
<label for="nombre">Tu nombre: </label><input type="text" id="nombre" name="nombre" /> <br/>
<a href="#" onclick="mostrarOpciones()">A dónde quieres viajar</a>: <span id="opcionElegida"></span>
<div id="opciones" style="display:none;" >
<label for="campo">Al campo</label><input type="radio" id="campo" name="viajar" onclick="seleccionarOpcion(this)" /> <br/>
<label for="playa">A la playa</label><input type="radio" id="playa" name="viajar" onclick="seleccionarOpcion(this)" /> <br/>
<label for="montanya">A la montaña</label><input type="radio" id="montanya" name="viajar" onclick="seleccionarOpcion(this)" /> <br/>
<label for="ninguno">A ningún sitio</label><input type="radio" id="ninguno" name="viajar" onclick="seleccionarOpcion(this)" /> <br/>
</div><br/>
<label for="edad">Tu edad: </label><input type="text" id="edad" name="edad" /> <br/>
<button type="submit">Envia</button>
</form>
Y tal y como está aquí también puede estar el DIV en
position: absolute y parecer una ventana emergente... eso como veas.
Un saludo
