JQuery - add/remove forms and divs

Question

Hey

I'm sure I've seen examples somewhere before, but I can't seem to find them. I have a page which has 5 buttons. I'd like each button to load up a different form, without refreshing. I could use UpdatePanels, but it sounds overkill for this (and bandwidth-costly). I'd like to load all the forms in one go, so clicking through the buttons essentially hides/shows the relevant forms. I can't do this using the html() method (as-is) since the forms can be quite complicated and contain ASP.NET controls which postback to the server. Instead, I've put the forms in individual divs.

I tried doing something like this:

                case "button1":

                    $(".current_form").show();
                    $("#divForm1").prependTo($('.current_form'));
                    break;

                case "button2":

                    $(".current_form").show();
                    $("#divForm2").prependTo($('.current_form'));
                    break;

The problem with this is that the old form always remains there, rather than being replaced. Is it possible to attach a div to a given container in JQuery? Or is there another method which may be better?

Thanks for any help

full code

<script type="text/javascript">
    $(document).ready(function() {

        $("button").button();
        $("button").click(function() {

            switch ($(this).attr("value")) {
                case "button1":

                    $('.current_form').empty().show();
                    $("#divForm1").clone().prependTo($('.current_form'));
                    break;

                case "button2":

                    $('.current_form').empty().show();

                    $("#divForm2").clone().prependTo($('.current_form'));
                    break;




            }
            return false; //prevent postback
        });



    });

</script>

I'm testing with these divs:

<div class="current_form">
<div id="divForm1" >

 This is div 1

</div>
</div>


<div class="current_form">
<div id="divForm2" >

  This is div 2

</div>
</div>

Answer 1

You can call it like this instead:

$('.current_form').empty().show();
$("#divForm1").clone().prependTo($('.current_form'));

Your markup would be like this:

<!-- Possible <form> tag here -->
<div class="current_form"></div>
<!-- Possible </form> tag here -->
<div id="divForm1">
 This is div 1
</div>
<div id="divForm2">
  This is div 2
</div>

This clears out the form before, and it creates a copy of what you want to prepend to put in .current_form, this means the original is still left and your buttons won't stop working after the first use.

Be sure to have your <div id="divFormXX"> elements outside the submitted form so the values from the original don't get submitted to the server as well.

---

Update: better option, less markup and less javascript :)
Markup:

<div id="divForm1" class="form" style="display: block;">
 This is div 1
</div>
<div id="divForm2" class="form">
  This is div 2
</div>

Javascript:

$(function() {
  $("button").button().click(function() {
    $(".form").hide();
    $("#divForm" + $(this).attr("value").replace('button','')).show();
    return false;
  });
});

CSS:

.form { display: none; } //Hide the forms initially