How do you suggest I display a different form depending on what option is chosen?

Here's the idea, someone clicks an option and I have to display something to the user.

If he chooses the first option "Deposit", I have to show him a form.

If he chooses the second option, I have to show an iFrame my payment gateway has given me.

I don't want to reload the entire page. This change must occur inline, without breaking.

Do I use j开发者_StackOverflow社区Query and AJAX to fetch the respective HTML and replace the current html with the .html() function jQuery offers?

Or do I output both forms, and use CSS to show one or the other?

What do you professionals suggest?

---

It depends on what you want to optimize for:

• Initial page load speed (→ use ajax to load the needed HTML), or
• Responsiveness after the user selects a payment method (→ show/hide with CSS)

---

The easiest is to use jQuery. Maybe something like this. Let's say that the id for your 2 radioboxes is radiobox1 and radiobox2

$(document).ready(function(){//The DOM
$("#radiobox1").change(function(){
   var $this = $(this);
   if($this.is(':checked'))
   {
      //The code for displaying your form
   }
});
});

---

Edit, because of a misunderstanding.

The easiest way (what I think) is to write the forms in HTML, and then hide them with CSS, and then make them visible or not with jQuery, or maybe with $.ajax - load the forms with ajax-mode.