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

Question

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

我有一些代码，但我无法显示字段。我遇到的早期问题（减去数组验证 - 包括破坏代码并停止出现额外字段）的原因是，如果用户选择“是”，然后返回改变主意并选择“否”，则表单不会提交，显然仍然需要输入字段/输入正确的数组值。

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

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函数中定义它们。这样，他们不会依赖每次被调用的东西。试试吧，它有效。

＆＃13;

＆＃13;

$(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;
      }
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;