How to use jquery to show hidden form fields.

Question

Hi,

I have three input fields for collecting telephone numbers from users. I display one field and hide the other two. I have placed a link(Add home number) below it and when you user clicks on the link it shows the hidden input field. And I have placed one more link below it when clicked displays the last input field.

  <input type="text" />
  <a href="#" class="show" >Add Home Number</a>
  <div style="display: none">
         <input type="text" />
  <a href="#" class="show" >Add Office Number</a>
  </div>               
  <div style="display: none">
         <input type="text" />
  </div>               

And the jquery looks like this..

<script>
    $(function(){ 
    $(".show").click(function () {
    $(this).next("div").show("slow");
    });
    });
</script>

The first link works fine, But the second one does not work.

I appreciate all help.

Thanks.

Answer 1

you have to use the each function:

like this:

$(".show").each($(this).click(function () {
    $(this).next("div").show("slow");
    })
);

Answer 2

.next() only selects the next sibling element. You links have no subsequent siblings, because you close the parent element (the div) immediately after. You need to select the next sibling of the div:

<script>
    $(function(){ 
        $(".show").click(function () {
            $(this).parent().next("div").show("slow");
        });
    });
</script>