javascript - 将多个表单 datePicker 数据发送到相同的目的地

Question

我在一个 div 中创建多个唯一的日期选择器实例，然后在表单中提交日期时遇到问题。

我的问题是我的 div 目前有多个构建此表单的数组元素:

<?php foreach($expiredPages as $expiredPage): ?>
<form id="updateTime_<?php echo $expiredPage['id']?>" class="updateTime" method="POST">
                    <input type="hidden" name="currentPageID" value="<?php echo $expiredPage['id']?>">
                    <div class="datepick input-group date" id="datetimepicker_<?php echo $expiredPage['id']?>" data-target-input="nearest">
                      <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker_<?php echo $expiredPage['id']?>" name="datePicker<?php echo $expiredPage['id']?>" />
                      <span class="input-group-addon" data-target="#datetimepicker_<?php echo $expiredPage['id']?>" data-toggle="datetimepicker">
                      <span class="fa fa-calendar"></span>
                      </span>
  <input type="submit" name="Extend Date" class="extendDate">
</form>
<?php endforeach; ?>

这意味着我在 div 中有 3 个表单，每个表单都有自己的日期选择器和提交按钮。我已经修复了这个问题，以确保每个日期选择器独立工作，但我不知道如何将我的两个输入唯一地传递给 PHP。

我收到 currentPageID 和 datePicker 未定义索引的错误

JS:

<script type="text/javascript">
            $(".extendDate").click(function(){
            event.preventDefault();
            var string = $('.updateTime').serialize();
            console.log(string);

              // AJAX Code To Submit Form.
                  $.ajax({
                      type: "POST",
                      url: "extendTime.php",
                      data: string,
                      dataType: 'json',
                      cache: false,
                      success: function(response){
                        location.reload();
               }
           });
       });
  </script>

extendTime.php

$pageID = $_POST['currentPageID'];
$dtPick = 'datePicker' . $pageID;
$newTime = $_POST[$dtPick];

$newEndTime = DateTime::createFromFormat('m/d/Y h:i A', $newTime);
$convertedDateTime = $newEndTime->format('Y-m-d H:i:s');

$extendExpiration = "
  UPDATE pages 
  SET end_time = '$convertedDateTime'
  WHERE id = '$pageID';
";

if($mysqlConn->query($extendExpiration)=== TRUE){
  echo "SUCCESS";
}else{
  echo "Could not extend Time";
}

Answer 1

关于您的 php，您没有名为 datePicker 的 post key ...

$_POST['datePicker'];

不存在...您在输入的名称中添加一个 id:

<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker_<?php echo $expiredPage['id']?>" name="datePicker<?php echo $expiredPage['id']?>" /> 

一个简单的修复应该是这样的:

$dtpick = 'datePicker' . $pageID;
      $newTime  = $_POST[$dtpick];