我如何创建自动适应表单

本文介绍了我如何创建自动适应表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I want to create a dynamic form on my website.

在我的网站上有几种表单是具体的，但我也有联系我们的表单与主题下拉菜单可以从主题特定表单中选择任何主题。

On my site a have several forms that are subject specific but i also have a contact us form with a subject dropdown from which they can choose any of the subjects that the subject specific forms cover.

如果他们选择网站设计查询，我需要问他们的网站地址，网站地址与所有其他查询主题无关，如果他们询问网站托管，我再次需要他们的网站地址，但也需要他们喜欢的托管包。

now if they select website design enquiry i need to ask them for their website address whereas website address isn't relevant to all of the other enquiry subjects, if they ask about website hosting i again need their website address but also need their preference of hosting package.

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

if they ask about mobile app development i don't need the website or hosting package fields but need 4 checkboxes to appear to allow them to tick the ones relating to the platforms for which the mobile app is to be developed for.

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

so it needs to be auto adaptive to the type of enquiry selected.

我如何能够实现这一点？

how can i acheive this?

推荐答案

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

Your question is quite vague, but the answer to it is that there are many ways to achieve it. One of the most commonly used ways is to use javascript (or some library like jQuery using js).

我已经为您组织了一个基本功能，它将展示如何在纯js中完成：

I have put together a basic function for you that will showcase how it's done in pure js:

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：

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

以下是上述代码的演示页：

Here is the demo page of the above code: http://jsfiddle.net/w3pGr/

这篇关于我如何创建自动适应表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Hosting