2017-04-05 18 views
1

問題是,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>') 
} 
}); 
+0

使用@DanielLane溶液,改變無功inputelement = input.value();到'var inputelement = input.value;'作爲值不是一個函數 – PhilS

+0

我已經更新了我的代碼,你可以只檢查它。我添加更多的按鈕,其中包含下拉和評論字段此腳本不工作裏面的添加更多按鈕@PhilS – aiffin

+0

現在你在混合使用vanilla Javascript和jQuery,如果你正在加載jQuery庫,你可以利用jQuery進行驗證。你的「添加更多」按鈕是添加一個id爲status []的選擇項,這是無效的,javascript不能引用它,一個ID屬性只能包含數字,字母,下劃線,完整冒號和句號我相信,而且必須是獨一無二的。 – PhilS

回答

2

您正在使用的輸入哈希符號調用的getElementById。在這種情況下#status和#commentss

要按ID選擇,您將需要在沒有散列的情況下進行呼叫。

document.getElementById('status'); 

哈希前綴用於querySelector並表示選擇將是一個id選擇器。

document.querySelector('#status');

+0

我已經在這種格式的document.getElementById('狀態')的JavaScript採取ID。當我選擇狀態爲已完成的@Daniel Lane時,JavaScript仍然沒有將註釋字段作爲重新請求 – aiffin

2

從按鈕刪除onclick="validate();"並添加腳本標籤中此代碼:

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

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