php - 多个日期选择器实例，更新数据库

Question

我在使用日期选择器提交数据库更新时遇到问题，我认为这与没有唯一的日期选择器实例有关。

目前，我正在使用构建 div 部分的 foreach 循环(基于 SELECT 语句)，每个部分都有自己的表格来显示当前日期和一个日期选择器实例来设置新日期。

日期选择器显示为输入，但是，无论我单击哪个，它只会在第一个上展开。我认为这是由于我的日期选择器输入的名称不唯一，但我认为这也会导致我的 ajax 和数据库插入出现问题。

基本上，当前循环目前构建了 3 个表单。每个都有自己的当前时间标签、新时间日期选择器输入和提交按钮。

我只是想这样做，如果他们为给定页面选择一个新时间并单击提交，它会发布到 php 脚本并使用新时间更新数据库。

我将页面 ID $expiredPage['id'] 附加到 datePicker 名称，这似乎没问题，但我不知道如何将其转换为 php 脚本中的 $_GET 变量。

非常感谢这里的任何帮助。

<h6>Current Expiration: <?php echo $expiredPage['end_time'] ?></h6>
<br>
<h6>New Expiration: </h6>
<form id="updateTime" method="POST">
  <input type="hidden" name="currentPageID" value="<?php echo $expiredPage['id']?>">
  <div class="datepick input-group date" id="datetimepicker" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker" name="datePicker<?php echo $expiredPage['id']?>" />
    <span class="input-group-addon" data-target="#datetimepicker" data-toggle="datetimepicker">
    <span class="fa fa-calendar"></span>
    </span>
  </div>

    <input type="submit" name="Extend Date" id="extendDate">
</form>

<?php endforeach; ?>


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

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

扩展时间.php

$pageID = $_GET['currentPageID'];
$newTime = $_GET['datePicker'];

$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";
}

mysqli_close($mysqlConn);

Answer 1

您只能在页面上创建一个带有 ID 的元素，因此请使表单 ID 对页面唯一，并将按钮 ID 更改为 CLASS，如下所示:

<form id="updateTime_<?php echo $expiredPage['id']?>" method="POST">
  <input type="hidden" name="currentPageID" value="<?php echo $expiredPage['id']?>">
  <div class="datepick input-group date" id="datetimepicker" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker" name="datePicker<?php echo $expiredPage['id']?>" />
    <span class="input-group-addon" data-target="#datetimepicker" data-toggle="datetimepicker">
    <span class="fa fa-calendar"></span>
    </span>
  </div>

    <input type="submit" name="Extend Date" class="extendDate">
</form>

在你的 JS 中，像这样提交点击按钮的父表单:

<script type="text/javascript">
  $(".extendDate").click(function(event){
  event.preventDefault();
  var string = $(this).parent().serialize();

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

请求类型也是 POST，所以你将在 PHP $_POST 中获取值:

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