JavaScript HTML - 用户选择时出现的额外必填表单字段

Question

我正在尝试创建一个表单，如果用户从下拉列表中选择"is"，则会出现两个额外的字段。这两个字段都是必需的，其中一个字段需要根据一组“代码”进行验证 - 用户必须输入数组中的代码之一才能正确提交表单。但是，如果用户从下拉列表中选择“否”，则这些字段不会出现并且不是必需的，并且不会发生数组验证并且可以提交表单。

我有一些代码，但是我无法显示字段。我之前遇到的一个问题(减去数组验证 - 包括破坏代码并停止出现额外字段)是，如果用户选择"is"，然后返回改变主意并选择“否”，那么表单无法提交，显然仍然需要填写字段/输入正确的数组值。

如果有人能帮助我完成这项工作，我将不胜感激。

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_code_input" name="auth_by" required disabled>

  </div>

  <hr>

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

</form>

JavaScript:

    $(document).ready(function() {

   checkIfYes = function checkIfYes() {
        if (document.getElementById('defect').value == 'Yes') {

          // show extra fields & make them required
          document.getElementById('extra').style.display = '';
          document.getElementById('auth_code_input').disabled = false;
          document.getElementById('desc').disabled = false;

          // show user if their input is one of the codes in the array when leaving field
          $('#auth_code_input').blur(function() {
            if (!ValidateInput()) {
              e.preventDefault();
            }
          });
          // prevent form submission if input is not one of the codes in the array
          $('#auth_form').on('submit', function(e) {
            if (!ValidateInput()) {
              e.preventDefault();
            }
          });

          function ValidateInput() {
            var codes = ['Foo', 'Bar']; // user must enter one of these
            var IsValid = false;
            var input = $('#auth_code_input').val()

            if (codes.indexOf(input) > -1) { // if input equals one of the codes in the array
              $('#iconBad').removeClass('glyphicon-remove').addClass('glyphicon-ok');
              IsValid = true;
            } else {
              $('#iconBad').removeClass('glyphicon-ok').addClass('glyphicon-remove');
              IsValid = false;
            }

            return IsValid;
          }

        } else { // hide and disable extra fields so form can submit
          document.getElementById('extra').style.display = 'none';
          document.getElementById('auth_code_input').disabled = true;
          document.getElementById('desc').disabled = true;
        }
      }
    });

<强> JSFiddle

Answer 1

这是您定义函数的方式中的一个小问题 - 通过调用 checkIfYes() ，它会在全局(窗口)范围内查找它。通过更改行:

function checkIfYes() {...

对此:

checkIfYes = function() {...

那么你就已经在全局范围内得到了它。顺便说一句，这是不好的做法。您最好在脚本本身中创建一个点击处理程序，而不是在 HTML 中硬编码函数调用。但这只是我。

进行了一些更改，其中一些非常重要 - 首先，我删除了对 checkIfYes 的硬编码引用，并简单地将事件放入 JavaScript 中。其次(非常重要)，我将事件处理程序移至 JavaScript 的根目录，而不是在 checkIfYes 函数中定义它们。这样，他们就不再依赖于每次调用。尝试一下，有效。

$(document).ready(function() {

  /**
   *  Define some custom events to handle...
   **/
      $("#defect").on("change", checkIfYes );
  // show user if their input is one of the codes in the array when leaving field
      $('#auth_code_input').blur(function() {
        if (!ValidateInput()) {
          console.log("Input is wrong!");
        }
      });
      // prevent form submission if input is not one of the codes in the array
      $('#auth_form').on('submit', function(e) {
        e.preventDefault();
        console.log("This is where I would be checking...");
        if (ValidateInput()) {
          $("#auth_form").submit();
        }
      });
  
 
  // Utility Functions.
  function checkIfYes() {
    if (document.getElementById('defect').value == 'Yes') {

      // show extra fields & make them required
      document.getElementById('extra').style.display = '';
      document.getElementById('auth_code_input').disabled = false;
      document.getElementById('desc').disabled = false;

    } else { // hide and disable extra fields so form can submit
      document.getElementById('extra').style.display = 'none';
      document.getElementById('auth_code_input').disabled = true;
      document.getElementById('desc').disabled = true;
    }
  }
  
        function ValidateInput() {
        var codes = ['Foo', 'Bar']; // user must enter one of these
        var IsValid = false;
        var input = $('#auth_code_input').val()

        if (codes.indexOf(input) > -1) { // if input equals one of the codes in the array
          $('#iconBad').removeClass('glyphicon-remove').addClass('glyphicon-ok');
          IsValid = true;
        } else {
          $('#iconBad').removeClass('glyphicon-ok').addClass('glyphicon-remove');
          IsValid = false;
        }

        return IsValid;
      }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form" method="post" action="action.php">

  <div class="form-group">
    <label class="control-label">Defect?</label>
    <select 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_code_input" name="auth_by" required disabled>

  </div>

  <hr>

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

</form>