Javascript 选择后显示和隐藏窗体的字段

我有一个javascript函数，可以在选择后显示和隐藏一个div。 div包含表单的字段。div test2包含div test1的字段以及其他字段。所有字段都是必填字段

我有两个问题：

1） 当我显示test2并完成字段时，保存表单是不可能的，因为test2中的一些字段在test1中找到。这意味着某些字段具有相同的名称

2） 所有字段都是必需的，这意味着即使我完成了test2中的字段，我仍然无法保存，因为test1中的字段尚未完成并隐藏。我如何创建代码结构以允许保存

function visibilite1(_this) {
  var id = _this.value;
  var divs = document.getElementsByTagName('div');

  for(var no=0;no<divs.length;no++) {
    if (divs[ no].className=='divs') { 
      'divs'
      divs[ no].style.display = "none"; 
    }
  }
  document.getElementById(id).style.display = "block"; 
}


<select name="role" id="role"
onchange="visibilite1(this);hide()" >
  <option value='test1'>Year1</option>
  <option value='test2'>Year2</option>
</select>
<div id="test1" class="divs">
  <label>Name </label>
  <input type="text" name= "name" id= "name" required>  </br>
  <label>User name </label>
  <input type="text" name= "username" id= "username"  required></br>
  <label >Password <em>*</em></label>
  <input type="password"   name= "password" id= "password" required></br>
</div>


<div id="test2" class="divs">
  <label>Name </label>
  <input type="text" name= "name" id= "name" required>  
  <label>User name </label>
  <input type="text" name= "username" id= "username"  required>
  <label>Password <em>*</em></label>
  <input type="password"   name= "password" id= "password" required>
  <input type="text" name= "username" id= "username"  required>
  <label>Adress<em>*</em></label>
  <input type="text"   name= "adress" id= "adress" required>
  <label>Client name</label>
   <?php 
   $sql="select ClientName from claims_follow_up.Client where id 
   !='10001' order by ClientName asc "; 
    $req=mysqli_query($dbc,$sql) or die("Erreur d'execution"); 
    ?> 
   <select name="ClientName" id="ClientName"
   onchange="
   var maVal = document.getElementById('ClientName').value;
   if (maVal == 'Create new client')
   {
   window.open('newClientCreate.php', 'blank', 'scrollbars=yes,    
   resizable=no, top=50, left=155, width=1200, height=700');
   };activer()" required disabled="true" onkeypress="activerSubmit()">
    <option value="">select client </option>
    <?php 
    while($d=mysqli_fetch_array($req)) 
    { 
    echo'<option    
   value="'.$d['ClientName'].'">'.$d['ClientName'].'</option>'; 
     } 
   mysqli_free_result($req); 
   ?>
  <option value="Create new client"  style="color:blue;   
   font-weight:bold">create new client</option>
   </select>
</div>

函数可视性1（\u this）{
var id=_this.value；
var divs=document.getElementsByTagName（'div'）；
对于（变量编号=0；编号
创建新客户端

无论何时隐藏div，都将其内部的所有输入设置为禁用。禁用输入时，将忽略必需的属性，并且禁用的输入不会随表单一起提交，因此后端不会出现名称冲突

var inputs = divs[no].getElementsByTagName('input');
for (var x = 0, len = inputs.length; x < len; x++) {
    inputs[x].disabled = true;
}

var inputs=divs[no].getElementsByTagName（'input'）；
对于（变量x=0，len=inputs.length；x

显然，当您取消隐藏一个div时，还需要遍历并重新启用该div中的所有输入

更新：下面是一个示例，根据要求使用给定代码。首先，JS：

function visibilite1(_this) {
  var inputs;
  var divToShow;
  var id = _this.value;
  var divs = document.getElementsByTagName('div');

  for(var no=0;no<divs.length;no++) {
    if (divs[no].className=='divs') { 
      divs[no].style.display = "none";
      inputs = divs[no].getElementByTagName('input');
      for (var x = 0, len = inputs.lenght; x < len; x++) {
        inputs[x].disabled = true;
      }
    }
  }

  divToShow = document.getElementById(id);
  divToShow.style.display = "block"; 
  inputs = divToShow.getElementByTagName('input');
  for (var x = 0, len = inputs.lenght; x < len; x++) {
    inputs[x].disabled = false;
  }
}

函数可视性1（\u this）{
var输入；
var divToShow；
var id=_this.value；
var divs=document.getElementsByTagName（'div'）；
对于（var no=0；no1），不要为两个组件放置相同的id，即使它位于不同的分区中。。。
第二，为了实现您的结果，当您隐藏div时，禁用与之对应的输入字段，并在需要时重新启用它。立即的反应是文档中的ID必须是唯一的！-表单元素名称可以相同，但这意味着它们是组的一部分（即：在选项按钮集合中，只有一个可能的选择）

最好保持它们的唯一性，否则您需要专门引用formName加elementName。
正如您所发现的，html页面中的元素不应该具有相同的id，html表单中的不同输入元素不应该具有相同的名称

假设您想停留在普通javascript的世界中，不想使用javascript框架（例如angular、ember），您可以通过设置元素的内部html来实现这一点。这样，“隐藏”html就不会出现在html标记中

类似于

<script>
  function hide () {
    console.log("whatever")
  }

  function visibilite1(_this) {
    var formgroup1 = '<div id="test1" class="divs"><label>Name </label><input type="text" name= "name" id= "name" required>  </br><label>User name </label><input type="text" name= "username" id= "username"  required></br><label >Password <em>*</em></label><input type="password"   name= "password" id= "password" required></br></div>'

    var formgroup2 = '<div id="test2" class="divs"><label>Name </label><input type="text" name= "name" id= "name" required><label>User name </label><input type="text" name= "username" id= "username"  required><label>Password <em>*</em></label><input type="password"   name= "password" id= "password" required><input type="text" name= "username" id= "username"  required><label>Adress<em>*</em></label><input type="text"   name= "adress" id= "adress" required></div>'

    var formtestElement = document.getElementById('formtest'); 

    if (_this.value == "test1") {
      formtestElement.innerHTML = formgroup1
    } else if (_this.value == "test2") {
      formtestElement.innerHTML = formgroup2
    };
  }
</script>

<select name="role" id="role"
  onchange="visibilite1(this);hide()" >
  <option value='test1'>Year1</option>
  <option value='test2'>Year2</option>
</select>

<div id="formtest">
  <div id="test1" class="divs">
    <label>Name </label>
    <input type="text" name="name" id="name" required>  </br>
    <label>User name </label>
    <input type="text" name="username" id="username" required></br>
    <label>Password <em>*</em></label>
    <input type="password" name="password" id="password" required></br>
  </div>
</div>


函数隐藏（）{
console.log（“无论什么”）
}
函数visibilite1（\u this）{
var formgroup1='Name
用户名
密码*
'
var formgroup2='Name用户名密码*地址*'
var formtestElement=document.getElementById（'formtest'）；
如果（_this.value==“test1”）{
formtestElement.innerHTML=formgroup1
}否则如果（_this.value==“test2”）{
formtestElement.innerHTML=formgroup2
};
}
第一年
第二年
名称


用户名


密码*



更新：默认情况下编辑以显示test1表单。
另一种方法是克隆元素并在显示/隐藏时将正确的元素放入表单中。在window onload事件中，我将select设置为所需索引，然后克隆并保存元素，从表单中删除隐藏的元素。更改时，我删除可见元素a然后添加所选的一个


var divsCloned=[]；
函数visibilite1（\u this）{
如果（divsCloned.length==0）{
返回；
}
var currDiv=document.getElementsByTagName（'div'）[0]；
_this.parentNode.removeChild（currDiv）；
_this.parentNode.insertBefore（divsCloned[\u this.selectedIndex]，\u this.nextSibling）；
}
window.onload=函数（）{
var divs=document.getElementsByTagName（'div'）；
对于（变量no=0；no


第一年
第二年
名称


用户名


密码*


名称
用户名
密码*
地址*
非常感谢您的超级代码，非常棒。默认情况下如何显示test1？没问题-欢迎您。默认情况下如何显示test1。只需将其放在元素“”内的标记中。如果用户选择test2，新标记将覆盖test1标记。我将编辑我的答案以使其更清晰。最后一个问题，如果我有在test2 div中有一个select标记，它从数据库中获取数据。我如何将它包含在var formgroup2中？我问这个问题是因为我必须使用php代码来获取select标记中的数据。我编辑代码只是为了显示我必须添加到tes2 div中的select。我认为您需要还原此问题的最后一次编辑，并将新问题作为单独的问题重新发布stackoverflow问题。这个问题最初是一个javascript问题（根据标签）现在这是一个与PHP相关的问题，我无法帮助解决。您的代码的问题是，在我选择test2之后，test1的必填字段仍然处于活动状态。因此无法保存。请检查您的代码提交按钮不起作用properly@branche我更正了我的代码，我希望现在它能工作。让我知道。谢谢，所以我会复制你的代码它根本不起作用。所有字段都会显示，并选择标记不起作用。第一个代码在哪里起作用，但必填字段处于活动状态，即使它们被隐藏。请给我一个如何使用代码的示例。例如，在包含您的代码示例中编辑我的代码？
<script>
  function hide () {
    console.log("whatever")
  }

  function visibilite1(_this) {
    var formgroup1 = '<div id="test1" class="divs"><label>Name </label><input type="text" name= "name" id= "name" required>  </br><label>User name </label><input type="text" name= "username" id= "username"  required></br><label >Password <em>*</em></label><input type="password"   name= "password" id= "password" required></br></div>'

    var formgroup2 = '<div id="test2" class="divs"><label>Name </label><input type="text" name= "name" id= "name" required><label>User name </label><input type="text" name= "username" id= "username"  required><label>Password <em>*</em></label><input type="password"   name= "password" id= "password" required><input type="text" name= "username" id= "username"  required><label>Adress<em>*</em></label><input type="text"   name= "adress" id= "adress" required></div>'

    var formtestElement = document.getElementById('formtest'); 

    if (_this.value == "test1") {
      formtestElement.innerHTML = formgroup1
    } else if (_this.value == "test2") {
      formtestElement.innerHTML = formgroup2
    };
  }
</script>

<select name="role" id="role"
  onchange="visibilite1(this);hide()" >
  <option value='test1'>Year1</option>
  <option value='test2'>Year2</option>
</select>

<div id="formtest">
  <div id="test1" class="divs">
    <label>Name </label>
    <input type="text" name="name" id="name" required>  </br>
    <label>User name </label>
    <input type="text" name="username" id="username" required></br>
    <label>Password <em>*</em></label>
    <input type="password" name="password" id="password" required></br>
  </div>
</div>