javascript - 当我在文本框中输入日期选择器值并且注释字段保持为空时。当我单击“添加更多”按钮时，不存储下一个日期选择器值

Question

问题是，当我在文本框中输入日期选择器并且注释字段保持为空时。当我单击添加更多按钮并且输入日期选择器值。下一个日期选择器值不会存储在数据库中。

下面是我的代码: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()。

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

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

id="date' + x + '"

还有

$("#date" + x)

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