Hide multiple forms on one page and open them with specific links

Question

I am creating a page and and it has multiple forms on each page. The forms are hidden but there is a link to each form. When the user clicks the link with the associated form than that form pops open in a lightbox, using colorbox.js. I have it working when only one form is on the page but I don't know how to create a script that works for multiple forms on one page. My script is:

   <script>
    jQuery(document).ready(function() {
        $(".myForm").hide();

        $(".link_to_form").click(function() {
            $(".myForm").show();
        });

        $(".link_to_form").colorbox({ 
            width: "50%", 
            inline: true,
            opacity: ".5", 
            href: ".myForm", 
            onClosed: function() {
                $(".myForm").hide();
            }

            });
    });
    </script>

The link that the user clicks on has a class of "link_to_form" and the actual form is in a div with the class of "myForm". Each form also has a specific id associated with it. So when a user clicks on the "register" form the form associated with that needs to pop up. Right now, if the user clicks on a link to any form all of the forms open in a lightbox.

Answer 1

Essentially, you are binding a click event which calls show() on all .myForm matches found in the DOM. What you're really trying to do is bind an event to all .link_to_form matches in the DOM, and have the click event only open the one that is relevant to the click.

A good way to do this would be like this:

<div class="form_1">
   <a href="#" id="form_open_button">Open Form</a>
   <form class="my_form_class'>
   </form>
</div>

<div class="form_2">
   <a href="#" id="form_open_button">Open Form</a>
   <form class="my_form_class'>
   </form>
</div>

$('.form_open_button').click(
function() {
   $(this).next().toggle();
});

But you have to be sure to keep your forms IMMEDIATELY after the Anchor. If they aren't immediate, change next() to:

$(this).next('.my_form_class').toggle()

Answer 2

$(".link_to_form").click(function() {
    $(this).prev(".myForm").show();
});

Answer 3

You can add a data- attribute to the link so it looks like

<a href='#' class="formLinks" data-form-id="form1" id="lnk_1">show</a>
<form id="form1"></form>

and then
your script would be

$('.formLinks').click(function(){
var formid =$(this).data('form-id');
$('#'+formid).show();
});