Question

我有一个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>

Answer 1

正如您所发现的，html页面中的元素永远不应具有相同的ID，并且html表单中的不同输入元素不应具有相同的名称。

假设你想要留在vanilla javascript的世界中并且不想使用javascript框架（例如angular，ember），你可以通过设置元素的内部html来实现这一点。这样＆＃34;隐藏＆＃34; 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>

更新：编辑为默认显示test1表单。

Answer 2

每当隐藏div时，将其中的所有输入都设置为禁用。当禁用输入时，将忽略所需的属性，并且禁用的输入不会随表单一起提交，因此您不会在后端发生名称冲突。

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

显然，当你取消隐藏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;
  }
}

HTML（缩小了一点，但足以看出它应该是什么样子）：

<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" required>  </br>
  <label>User name </label>
  <input type="text" name= "username" required></br>
  <label >Password <em>*</em></label>
  <input type="password"   name= "password" required></br>
</div>

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

Answer 3

第一件事不要为2个组件添加相同的ID，即使它在不同的div中... 第二个实现你的结果，当你隐藏div时，禁用与之对应的输入字段并在需要时重新输入

Answer 4

立即反应是文档中的ID必须是唯一的！ - 表单元素名称可以相同，但这意味着它们是组的一部分（即：在选项按钮集合中，只有一个可能的选择）。

最好保持它们都是唯一的，否则你需要专门引用formName加上elementName。

Answer 5

另一种方法是克隆元素并在show / hide中将正确的元素放在窗体中。在窗口onload事件中我将select设置为所需的索引并且我克隆并保存元素，从表单中删除隐藏的元素。在更改时我删除了可见元素并添加了所选元素。

＆＃13;

var divsCloned = [];

function visibilite1(_this) {
  if (divsCloned.length == 0) {
    return;
  }
  var currDiv = document.getElementsByTagName('div')[0];
  _this.parentNode.removeChild(currDiv);
  _this.parentNode.insertBefore(divsCloned[_this.selectedIndex], _this.nextSibling);
}
window.onload = function() {
  var divs = document.getElementsByTagName('div');
  for (var no = 0; no < divs.length; no++) {
    divsCloned.push(divs[no].cloneNode(true));
    if (no != 0 && divs[no].parentNode) {
      divs[no].parentNode.removeChild(divs[no]);
    }
  }
}

＆＃13;

<form>
    <select name="role" id="role"
            onchange="visibilite1(this);">
        <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>
    </div>
    <input id="submit" type="submit" value="Submit">
</form>

＆＃13;

选择后显示和隐藏表单的字段

5 个答案: