選擇後顯示並隱藏表格的字段

Question

我有一個javascript功能，選擇後顯示和隱藏div。 div包含表單的字段。 div test2具有div test1和其他字段的字段。所有的字段都是必需的。

我有2個問題：

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

另一種方法是克隆元素並在show/hide中放入正確的窗體。在窗口onload事件中，我將select設置爲所需的索引，然後克隆和保存元素，從窗體中刪除元素隱。在更改時，我刪除可見元素並添加選定的元素。

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]); 
 
    } 
 
    } 
 
}

<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>

Answer 2

每當您隱藏div時，將其中的所有輸入設置爲禁用狀態。當輸入被禁用時，所需的屬性將被忽略，並且禁用的輸入不會與表單一起提交，所以您不會在後端發生名稱衝突。

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

顯然，當你取消隱藏一個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

1日的事情不要放在同一個ID爲2層的組件，即使它在不同的divs ... 第二次實現你的結果，當你隱藏的div，禁用輸入字段相應的，並重新使用它時，你需要

Answer 4

立即反應是文件中的ID必須是唯一的！ - 表單元素名稱可以相同，但這意味着它們是組的一部分（即：在只有一個可能的選擇的選項按鈕集合內）。

最好讓它們都保持唯一，否則你需要特別指向formName和elementName。

Answer 5

正如您發現的那樣，html頁面中的元素不應該具有相同的id，並且html表單中的不同輸入元素不應具有相同的名稱。

假設你想留在香草世界的JavaScript，並不想使用JavaScript框架（例如角度，燼），你可以通過設置元素的內部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> 

更新：編輯，顯示默認Test1窗體。