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>