Dynamic Form with javascriptPHP - Stack Overflow

admin管理员组

文章数量:1021143

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.

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.

• php
• javascript
• jquery
• ajax
• forms

Share Improve this question Follow asked Nov 1, 2010 at 18:20 Adam ThompsonAdam Thompson 30611 gold badge44 silver badges1515 bronze badges 2

• This is a programming question so I am moving it to StackOverflow. – John Conde Commented Nov 1, 2010 at 18:26
• Could you post some code of what you have already? – Phill Pafford Commented Nov 1, 2010 at 18:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

http://jsfiddle/73yuu/

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.

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/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;
    }

});

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.

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.

• php
• javascript
• jquery
• ajax
• forms

Share Improve this question Follow asked Nov 1, 2010 at 18:20 Adam ThompsonAdam Thompson 30611 gold badge44 silver badges1515 bronze badges 2

• This is a programming question so I am moving it to StackOverflow. – John Conde Commented Nov 1, 2010 at 18:26
• Could you post some code of what you have already? – Phill Pafford Commented Nov 1, 2010 at 18:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

http://jsfiddle/73yuu/

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.

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/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;
    }

});

本文标签：