如果选择下拉列表，则显示额外的表单字段(Display extra form fields if dropdown is selected)

如果选择下拉列表，则显示额外的表单字段(Display extra form fields if dropdown is selected)

如果用户从下拉列表中选择'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

I'm trying to make two extra form fields appear if the user selects 'Yes' from a dropdown. If the user does not select 'Yes' from the dropdown, then the two extra fields are not required and are disabled, however if 'Yes' is selected these fields must be filled in before form submission. I have this so far, however it's not working. If anyone could point out the issue it would be greatly appreciated.

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

最满意答案

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

我还建议将select onclick事件更改为onchange，以便仅在用户实际更改其值时才调用它

查看更新的小提琴： 更新小提琴

<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> 
  
 
checkIfYes needs to be defined before the HTML that references it.
 
I would also recommend changing the select onclick event to onchange so that it only gets called when the user actually changes he value
 
See updated fiddle : 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>