2017-04-03 41 views
2

的問題是,當我點擊「添加按鈕」日期選擇字段添加這顯示當前的日期作爲默認值,當我手動更改日期並單擊添加按鈕時,它將重置所有日期選擇器中的默認值。當我點擊添加更多按鈕,新的日期選擇器字段添加以前的日期選擇器值復位

我的代碼如下:

<div class="form-group row"> 
    <label for="example-date-input" class="col-2 col-form-label" style="margin-left:28.5%;">DATE</label> 
    <div class="col-10"> 
    <input class="form-control datepicker pick" id="date[]" name="date[]" value="<?php echo $_POST['date'] ?>" style="" type="text" readonly> 
    </div> 
</div> 

<div class="form-group"> 

<div class="col-md-8 col-sm-12 col-24"> 
    <div class="input_fields" style="color:black"> 
     <button class="add_field btn " onclick="incrementValue()" style="">Add More</button> 
     <div> 
     <input type="text" name="mytextt[]" hidden="" ></div> 
</div> 
</div> 
</div> 

的javascript:

$(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 row"><label for="example-date-input" class="col-2 col-form-label date">DATE</label><div class="col-10 col"><input class="form-control datepicker pick" id="date[]" name="date[]" style="" type="text"></div></div>');$(".datepicker.pick").datepick({dateFormat: 'dd/mm/yyyy'}).datepick("setDate", "0");}});}); 
+0

因爲使用類名稱重置日期。因此所有具有類名「.datepicker.pick」的輸入都將被重置。我認爲你的JQuery有問題。如果'.datepick(「setDate」,「0」)'設置日期那麼所有的都將被設置,因爲你使用的是類名。爲什麼'.datepicker.pick' – webDev

+0

我應該指定不同的類名? @webDev – Rice

+0

當您單擊添加更多並根據該ID重置值時,您應該能夠爲每個輸入區域創建唯一的ID。或者,如果您想使用課程將日期設置爲輸入區域,則不要重置該值。 – webDev

回答

1

所以對於您的要求創建的每個字段(輸入框)的唯一ID,由計數或一些變量連接到ID 。並創建你的JS也ID不使用類。這將不會影響其他輸入框。
這樣的事情,看到箱子和日期選擇器方法的ID太

$(wrapper).prepend('<div class="form-group row"><label for="example-date-input" class="col-2 col-form-label date">DATE</label><div class="col-10 col"><input class="form-control datepicker pick" id="date_'+x+'" name="date[]" style="" type="text"></div></div>');$("#date_"+x).datepick({dateFormat: 'dd/mm/yyyy'}).datepick("setDate", "0");}});}); 

請注意ID實現。

重要提示:請看看使用類和ID之間的區別。

Difference between class and ID

JQuery Selectors-w3school

How do I select an item using class or ID?

相關問題