Form that change input fields based on the input value selected

本文关键字：输入字段表单 | 更新日期: 2023-09-27

我需要开发一个Web表单，用户可以在其中选择一个类别并基于类别显示新的输入字段。我知道这与javascript有关。我研究了github和stackoverflow。但找不到合适的答案。

我的要求简单

交易形式

1）选择字段：domain, merchandise, vehicle

2选择角色： buyer . / seller ，

3）输入其他电子邮件：

4）谁支付托管：buyer, seller, both

5）检验时间：1-30 days

6）交易名称：

7）商品/车辆托管

ADD SHIPPING.
who pays for shipping

8）

enter domain name
enter price

9）

item name
quantity
 price
description
shipping fee

10）

vehicle year
vehicle make
 modal
price

用户可以选择输入VIN, odometer, notes, registration expiration date, state titled, state registered,，并可以包含运输fee。

shipping fee

正如我提到的，当用户选择vehicle escrow时，需要出现vehicle escrow的字段，我尝试使用getElementById和innerHTML来执行此操作，这似乎很复杂。

此外，某些字段需要多次添加。我为此查看了附加 JQuery，但仍然没有线索。

如果有人能在这方面帮助我，我将很高兴。

请检查下面的链接。它有一个表单，它会根据所选项目进行更改。

http://ikman.lk/en/new

谢谢。

在这种情况下，您可以使用以下逻辑。另请参阅下面的 url 以查看如何使用 jquery 显示/隐藏内容。

if( domain is selected){
  hideEveryThing();
  shopwSomeThing();  
}

http://www.w3schools.com/jquery/jquery_hide_show.asp

因此，

将所有顶级类别放入一个选择元素中，然后检查何时使用 jQuery 选择一个类别，然后显示该类别的输入（使用 CSS 显示将它们全部隐藏：首先没有）：

$('select').change(function(){
    if ($(this).val() == ' Category Name ') {
        show the inputs for this category;
    }
});

如果你使用javascript，那么你可以使用：

document.getElementById("divid").style.display="none"; //To hide div
document.getElementById("divid").style.display="block"; //To show div

如果你使用jquery，那么：

$("#divid").hide(); //To hide div
$("#divid").show(); //To show div

或

$('#divid').css({'display':'none'});  //To hide div
$('#divid').css({'display':'block'}); //To show div