使用 javascript/PHP 的动态表单答案

【问题标题】：Dynamic Form with javascript/PHP使用 javascript/PHP 的动态表单
【发布时间】：2011-05-03 13:54:54
【问题描述】：

好吧，说我有一个页面，比如 form.php。在此表单上说我有复选框 A、B 和 C。我想要做的是当您单击复选框 A 时，它显示表单 A，复选框 B 显示表单 B，复选框 C 显示表单 c。我需要这一切都是动态的，因此无需重新加载页面等即可发生这种情况。我会假设这将使用 Jquery 或 Ajax。我更喜欢使用 Jquery 只是因为我有一点经验，而且我的网站也已经在使用 Jquery 技术。

【问题讨论】：

这是一个编程问题，所以我将其移至 StackOverflow。
你能发布一些你已经拥有的代码吗？

标签： php javascript jquery ajax forms

【解决方案1】：

不是最漂亮的实现，但它为您指明了一个方向。

http://jsfiddle.net/73yuu/

【讨论】：

绝对不是美化 :) 它给了我我需要的东西。谢谢！

【解决方案2】：

我要做的是加载所有 3 个表单，将它们放在自己的 div 中，并为所有三个表单添加 style="display:none;"。当用户单击复选框时（如果一次只能显示一个表单，我将使用单选按钮），使用 jquery 或任何方法来更改该特定 div 的显示值以阻止。您也可以更改 div 的类以显示正确的 div。

【讨论】：

【解决方案3】：

我知道这是一篇旧帖子，但我一直在寻找类似的解决方案，最终来到了这里。

我使用 Ole Melhus 的答案作为起点，并使用 switch/case 而不是 if/else 使它对我更漂亮和更有用。只是想我会把它贴在这里给其他可能需要它的人。

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

});

【讨论】：