CODEWITHSUNDEEP
javascriptphphtmlajax
Geoff_S
Geoff_S

Reputation: 5107

Sending multiple form datePicker data to the same destinations

I'm having issues with creating multiple unique datepicker instances within one div and then submitting the dates in a form.

My issue is that my div currently has multiple array elements building this form:

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

WHich means I have 3 forms in the div, each with its own datepicker and submit button. I've fixed this to make sure each datepicker works independently, but I can't figure out how to uniquely pass my two inputs to the PHP.

I'm getting errors of undefined index for both currentPageID and datePicker

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

Upvotes: 0

Views: 286

Answers (1)

Guy Louzon
Guy Louzon

Reputation: 1203

Regarding your php, you don't have post key called datePicker... 

$_POST['datePicker'];

doesn't exists... you add to your input's name an id:

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

A simple fix should be something like this :

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

Upvotes: 1

Related Questions