私がドロップダウンオプションを選択して完了したら、コメント欄は必須です

Question

問題は、JavaScriptが機能していないことです。完了したらドロップダウンからオプションを選択すると、コメントフィールドが必要です。この検証は送信ボタンで実行する必要があります。他のオプションが使用されている場合は、コメントフィールドは必須ではありません。

<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のindex.php：

<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と#commentss

idで選択するには、ハッシュなしで呼び出しを行う必要があります。

document.getElementById('status'); 

ハッシュプレフィックスはquerySelectorに使用され、選択がIDセレクタになることを示します。

document.querySelector（ '＃status'）;

Answer 2

ボタンからonclick="validate();"を削除し、スクリプトタグ内にこのコードを追加します。

$(document).ready(function() { 
     $("#save_btn").click(function() { 

      if ($("#status").val() == "Completed") { 
       $("#commentss").attr("required", "required"); 
      } 
     }); 
});