当我在文本框中输入 datepicker 值并且注释字段保持为空时。当我单击添加更多按钮时，下一个 datepicker 值不存储

Question

问题是，当我在文本框中输入 datepicker 并且 comment field 保持为空。当我点击 add more button 和输入 datepicker 值。下一个 datepicker 值不存储在 db 中。

下面是我的代码：form.php

<form class="form-horizontal" method="post" action="new1.php?is_user=0" enctype="multipart/form-data">

      <!--date-->
          <div class="form-group">
          <label class="col-md-4 control-label" for="textinput">DATE</label>  
          <div class="col-md-4">
          <input id="date" name="date[]" value="<?php echo $_POST['date'] ?>" style="width:100%;margin-left:-0.4%;margin-top:0%;" type="text" class="form-control input-md datepicker pick" readonly>
          </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="comment[]" name="comment[]" type="text" placeholder="" class="form-control input-md"> 
          </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()" >Add More</button>
             <div>
             <input type="text" name="mytextt[]" hidden="" ></div>
    </div>
    </div>
    </div>
<div class="form-group">
  <label class="col-md-4 control-label" for="save_btn"></label>
  <div class="col-md-8">
    <button id="save_btn" name="save_btn" type="submit" class="btn btn-success" style="width: 10em;margin-left:10px">Save</button><span><span></span></span>
    <button onclick="ClickEvent()" class="btn btn-warning" style="width: 10em;"><a style="color:white" href="search.php">Cancel</a></button>

  </div>
</div>

</form>

javascript：

    <script type="text/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 pickers" id="date2" name="date[]" style="" type="text" readonly></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></center><a href="#" class="remove_field" style=""><img src="images/del24.png" ></a></a></div>');var newInput=$("#date2").datepick({dateFormat: 'dd/mm/yyyy'});newInput.datepick({dateFormat: 'dd/mm/yyyy'}).datepick("setDate", new Date()); }
        });

        $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })


      });


</script>

Answer 1

有很多事情需要修复，并且您可以做很多事情来改进代码。我不会涉及所有这些，但这里是最直接的事情。

工作示例：https://jsfiddle.net/Twisty/c03ajvuw/

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 pickers" id="date' + x + '" name="date[]" style="" type="text" readonly></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></center><a href="#" class="remove_field" style=""><img src="images/del24.png" ></a></a></div>');
      var newInput = $("#date" + x).val($("#date").val()).datepicker({
        dateFormat: 'dd/mm/yy'
      });
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  });
});

首先，使用.datepicker() 调用jQuery DatePicker，而不是.datepick()。

其次，日期格式应为 dd/mm/yy 用于 2016 年 12 月 31 日样式的日期，而不是 dd/mm/yyyy，这将导致 31/12/20162016。在这里阅读更多：http://api.jqueryui.com/datepicker/#option-dateFormat

第三，您将新字段 id 命名为 date2，因此每次单击 add more 时，您都会创建一个具有相同值的新 ID。我将其调整为：

id="date' + x + '"

和

$("#date" + x)

这将确保每个元素都有一个唯一的 ID。希望对您有所帮助。