CODEWITHSUNDEEP
phpjavascriptjqueryajaxforms
Adam Thompson
Adam Thompson

Reputation: 306

Dynamic Form with javascript/PHP

Alright say that I have on a page, say form.php. On this form say that I have checkbox A, B, and C. What I want to do is when you click on checkbox A it shows form A,checkbox B shows form B and Checkbox C shows form c. I need this to all be dynamic, so this happens without reloading the page or such. I would assume that this would use Jquery or Ajax. I would prefer the use of Jquery just because I have a bit of experience in it and my site is also already making use of Jquery technology.

Upvotes: 2

Views: 3855

Answers (3)

SuperMykEl
SuperMykEl

Reputation: 623

I know this is an old post, but I was looking for a similar solution and I ended up here.

I used Ole Melhus' answer as a starting point and made it a bit prettier and more useful to me using switch/case instead of if/else. Just thought I would post it here for anyone else that might need it.

http://jsfiddle.net/N5rfu/

$("#for_form1, #for_form2, #for_form3").change(function(){
    switch($(this).attr('id')){
        case 'for_form1':
            $("#for_form2, #for_form3").attr('checked', '');
            $("#form2, #form3").hide(); 
            $("#form1").show();
            break;
        case 'for_form2':
            $("#for_form1, #for_form3").attr('checked', '');
            $("#form1, #form3").hide(); 
            $("#form2").show();
            break;   
        case 'for_form3':
            $("#for_form1, #for_form2").attr('checked', '');
            $("#form1, #form2").hide(); 
            $("#form3").show();   
            break;
    }

});

Upvotes: 1

Tom
Tom

Reputation: 46

What I would do is load all 3 forms up, having them in there own div and with style="display:none;" for all three. When a user click the checkbox (I would use radio buttons if only one form could be displayed at time), use jquery or what ever to change the value of that particular div's display to block. You could change classes for the div as well to show the proper div.

Upvotes: 1

Ole Melhus
Ole Melhus

Reputation: 1929

Not the most beautiful implementation, but it points you in a direction.

http://jsfiddle.net/73yuu/

Upvotes: 3

Related Questions