javascript - 当我选择完成的下拉选项时，必须填写评论字段

Question

问题是，javascript 不工作。当我从下拉列表中选择选项时，评论字段是必需的，此验证应在提交按钮上完成。如果使用任何其他选项，则评论字段不是强制填写的。

下面是我的代码:index.php

    <form class="form-horizontal" method="post" action="new.php">

    <!-- Select Basic -->
    <div class="form-group">
      <label class="col-md-4 control-label" for="selectbasic">Status</label>
      <div class="col-md-4">
        <select id="status" name="status[]" class="form-control" >
          <option value="Pending">Pending</option>
          <option value="Work in process">Work in process</option>
          <option value="Completed">Completed</option>
        </select>
      </div>
    </div>

    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="textinput">Comment</label>  
      <div class="col-md-4">
      <input id="commentss" name="comment[]" type="text" placeholder="" class="form-control input-md" /> 
      </div>
    </div>
<div class="col-md-8 col-sm-12 col-24">
    <div class="input_fields" style="color:black">
         <button class="add_field btn " onclick="incrementValue()" >Add More</button>
         <div>
         <input type="text" name="mytextt[]" hidden="" ></div>
</div>
</div>

    <button id="save_btn" name="save_btn" type="submit" onclick="validate();" class="btn btn-success" style="width: 10em;margin-left:10px">Save</button>
    </form>

JavaScript:

<script type="text/javascript">
  function validate()
  {
    var input=document.getElementById("#status");
    var comm=document.getElementById('#commentss')
    var inputelement=input.value;
    if(inputelement=="Completed")
    {
      comm.required=true;
    }

  }
</script>

     $(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields"); //Fields wrapper
    var add_button      = $(".add_field"); //Add button ID
    var wrapper_pre1         = $(".present_fields_1"); //Fields wrapper
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();

        if(x < max_fields){ //max input box allowed
            x++; //text box increment
           $(wrapper).prepend('<div class="form-group"> <label class="col-md-4 control-label status" for="selectbasic" style="">Status</label><div class="col-md-6"><select id="status[]" name="status[]"  class="form-control status"><option value="Pending">Pending</option><option value="Work in process">Work in process</option><option value="Completed">Completed</option></select></div></div><div class="form-group"><label class="col-md-4 control-label comment" for="textinput" style="">Comment</label><div class="col-md-4"><input id="comment[]" name="comment[]" type="text" placeholder="" class="form-control input-md comment" style=""></div></div>')
}
 });

Answer 1

您在输入中使用哈希符号调用 getElementById。在这种情况下#status 和#comments

要按 id 选择，您需要在没有哈希的情况下进行调用。

document.getElementById('status');

散列前缀用于 querySelector 并表示选择将是一个 id 选择器。

document.querySelector('#status');