当我选择下拉选项为已完成时，则必须提供注释字段

Question

The problem is, the javascript is not working. When i select the option from dropdown as completed the comment field is required this validation should be done on submit button.if any other option is used then comment field is not compulsory to fill it.

below is my code: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

You're calling getElementById using a hash symbol on the input. In this case #status and #commentss

To select by id, you will need to make the call without the hash.

document.getElementById('status');

The hash prefix is used for querySelector and to denote that the selection will be an id selector.

document.querySelector('#status');