Question

我想在我的网站上创建一个动态表单。

在我的网站上，我有几个特定主题的表格，但我也有一个联系我们表格，主题下拉列表，他们可以从中选择主题特定表格所涵盖的任何主题。

现在，如果他们选择网站设计查询我需要询问他们的网站地址，而网站地址与所有其他查询主题不相关，如果他们询问网站托管我再次需要他们的网站地址而且需要他们偏好托管包。

如果他们询问移动应用开发，我不需要网站或托管软件包字段，但需要4个复选框才能让他们勾选与要为其开发移动应用的平台相关的复选框

所以它需要自动适应所选择的查询类型。

我怎么能实现这个目标？

Answer 1

你可以使用jQuery来实现这一点。

您需要在下拉列表选择中添加jQuery更改侦听器。然后将表单元素添加到包含所选值的容器中。

这是一个小例子

$( ".select" ).change(function() {
    var value = this.val();
    if(value == "webDesign")
    {
        $("#fieldsContainer").append('<input name="webUrl" class="inputField"/>');
    }
});

您还可以更改操作网址，以选择值，以便更轻松地处理不同的表单

if(value == "webDesign")
{
     $("form#myForm").attr('action','process.php?type=webdesign');
}

Answer 2

你的问题很模糊，但答案是有很多方法可以实现它。最常用的方法之一是使用javascript（或者像jQuery一样的库使用js）。

我为你准备了一个基本功能，展示了它在纯粹的js中是如何完成的：

HTML：

Services: <select id="service">
    <option value="stuff">stuff</option>
    <option value="webdesign">webdesign</option>
</select><br />
<span id="webname">Website: <input type="text" /></span>

JS：

document.getElementById("service").onchange = function () {
    if (document.getElementById("service").options[document.getElementById("service").selectedIndex].value == "webdesign")
        document.getElementById("webname").style.display = "none";
    else
        document.getElementById("webname").style.display = "block";
}

以下是上述代码的演示页： http://jsfiddle.net/w3pGr/

我如何创建自适应表单

2 个答案:

HTML：

JS：