Question

您好我想知道是否可以使用javascript / jquery或Ajax来显示基于单选按钮的表单。

例如，我有两种不同的形式如果选中一个单选按钮，我想加载第一个表单，但如果选中第二个单选按钮，我想加载第二个表单。这可能使用Ajax吗？

如果更容易，我只需要根据单选按钮显示/删除选择框和输入框。

由于

Answer 1

将两个表单放在页面上然后隐藏它们。然后，为具有“表单1”和“表单2”选项的单选按钮列表添加更改事件处理程序。相应地切换表单的显示。

然后，在表单中包含单独的提交按钮。为它们编写单击事件处理程序，以验证任一表单的必填字段。

Answer 2

示例：http://jsfiddle.net/ft0se9Ld/

HTML：

Choose your form<br/>
<input type="radio" name="rdForm" value="form1" checked="checked">form1
<input type="radio" name="rdForm" value="form2">form2


<div id="form1">
    First name: <input type="text" name="firstname" /><br/>
    Last name: <input type="text" name="lastname" />
</div>
<br/>

<div id="form2" style="display:none;">
    adress: <input type="text" name="firstname" /><br/>
    stuff: <input type="text" name="lastname" />
</div>

使用Javascript：

$(':radio[name="rdForm"]').change(function() {
    var choosenForm = $(this).filter(':checked').val();

    if(choosenForm === "form1"){
        $("#form1").show();
        $("#form2").hide();
    }else if(choosenForm === "form2"){
        $("#form1").hide();
        $("#form2").show();
    }
});

根据单选按钮从模板创建表单

2 个答案: