making of: jQuery jugando al gato y al ratón, show & hide en HTML forms
Hoy es el día de aprender cosas…
Así que vamos a ver, como manejar elementos en formularios web de manera que podamos mostrarlos u ocultarlos según nos convenga:
javascript:
$(document).ready(function() {
$('#showFoo2').hide();
$('#Foo1').click( function(e) {
if (e.target.type !== 'radio') {
$(this).find(":radio").trigger('click');
}
$('#showFoo2').hide();
$('#showFoo1').show();
});
$('#Foo2').click( function(e) {
if (e.target.type !== 'radio') {
$(this).find(":radio").trigger('click');
}
$('#showFoo1').hide();
$('#showFoo2').show();
});
// bind 'fooForm' y nos da un callback
$('#fooForm').ajaxForm(function() {
alert("Datos enviados al servidor");
});
});
HTML:
<form method='post' action="devnull.php" id="fooForm" />
Foo1 o Foo2:<br>
<input id="Foo1" type="radio" name="Foo" value="01"
checked="checked" >
Foo1 <br>
<div id="showFoo1">
#Foo1: <input name="fooInput1" type="text"
size="20" maxlength="20" /> <br>
</div>
<input id="Foo2" type="radio" name="Foo2" value="02">
Foo2<br>
<div id="showFoo2">
Foo2:<input name="fooInput2"
type="text" maxlength="16" />
</div>
</form>