несколько экземпляров DatePicker, обновление базы данных

Question

У меня проблема с отправкой обновления базы данных с использованием datepicker, и я думаю, что это связано с отсутствием уникальных экземпляров datepicker.

В настоящее время я использую цикл foreach (основанный на операторе SELECT), который создает разделы div, каждая со своей собственной формой, которая показывает текущую дату и экземпляр DatePicker для установки новой даты.

DatePicker отображается в качестве входных данных, однако, независимо от того, какие из них я нажимаю, он только расширяетсяна первом.Я полагаю, что это связано с неуникальным именем в моем вводе datepicker, но я думаю, что это также приводит к проблемам с моей вставкой ajax и db.

По сути, этот текущий цикл создает 3 формы в данный момент.Каждый со своей меткой текущего времени, новым датчиком ввода времени и кнопкой отправки.

Я просто пытаюсь сделать так, чтобы, если они выберут новое время для данной страницы и нажмут кнопку отправки, она отправитphp-скрипт и обновляет базу данных с новым временем.

Я добавил идентификатор страницы $expiredPage['id'] к имени datePicker, которое выглядит нормально, но я не знаю, как перевести это в мою переменную $ _GET вскрипт php.

Любая помощь здесь очень ценится.

<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>

exteTime.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 на 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'];