如果選擇了下拉菜單，則會顯示額外的表單域

Question

如果用戶從下拉菜單中選擇'Yes'，我試圖創建兩個額外的表單域。如果用戶沒有從下拉列表中選擇'Yes'，那麼這兩個額外的字段不是必需的，並且被禁用，但是如果選擇'Yes'，則在提交表單之前填寫這些字段必須填寫。到目前爲止我有這個，但它不起作用。如果有人能指出這個問題，將不勝感激。

HTML：

<form id="form" method="post" action="action.php"> 

    <div class="form-group"> 
    <label class="control-label">Defect?</label> 
    <select onclick='checkIfYes()' class="select form-control" id="defect" name="defect"> 
     <option id="No" value="No">No</option> 
     <option id="Yes" value="Yes">Yes</option> 
    </select> 
    </div> 

    <div id="extra" name="extra" style="display: none"> 

    <label class="control-label" for="desc">Description</label> 
    <input class="form-control" type="text" id="desc" name="desc" required disabled> 

    <label class="control-label" for="auth_by">Authorised By</label> 
    <input class="form-control" type="text" id="auth_by" name="auth_by" required disabled> 

    </div> 

    <div class="form-group"> 
    <button class="btn btn-info" id="submit" name="submit" type="submit">Submit 
    </button> 
    </div> 

</form> 

的JavaScript：

function checkIfYes() { 
    if (document.getElementById('defect').value == 'Yes') { 
    document.getElementById('extra').style.display = ''; 
    document.getElementById('auth_by').disabled = false; 
    document.getElementById('desc').disabled = false; 
    } else { 
    document.getElementById('extra').style.display = 'none'; 
    } 
} 

JSFiddle

Answer 1

checkIfYes需要引用它的HTML之前定義。

我也建議改變選擇onclick事件的onchange，使之僅僅被調用，當用戶實際上改變了他的價值

見更新小提琴：Updated Fiddle

<script>  
 
    function checkIfYes() { 
 
     if (document.getElementById('defect').value == 'Yes') { 
 
     document.getElementById('extra').style.display = ''; 
 
     document.getElementById('auth_by').disabled = false; 
 
     document.getElementById('desc').disabled = false; 
 
     } else { 
 
     document.getElementById('extra').style.display = 'none'; 
 
    } 
 
} 
 
</script> 
 
<form id="form" method="post" action="action.php"> 
 

 
    <div class="form-group"> 
 
    <label class="control-label">Defect?</label> 
 
    <select onchange='checkIfYes()' class="select form-control" id="defect" name="defect"> 
 
     <option id="No" value="No">No</option> 
 
     <option id="Yes" value="Yes">Yes</option> 
 
    </select> 
 
    </div> 
 

 
    <div id="extra" name="extra" style="display: none"> 
 

 
    <label class="control-label" for="desc">Description</label> 
 
    <input class="form-control" type="text" id="desc" name="desc" required disabled> 
 

 
    <label class="control-label" for="auth_by">Authorised By</label> 
 
    <input class="form-control" type="text" id="auth_by" name="auth_by" required disabled> 
 

 
    </div> 
 

 
    <div class="form-group"> 
 
    <button class="btn btn-info" id="submit" name="submit" type="submit">Submit 
 
    </button> 
 
    </div> 
 

 
</form>