Form within loop, creating unique values on POST

[thenorman138]

I'm having an issue related to creating forms within a foreach loop.

As of now, I have 3 forms in a div, each with their own datepicker instance and submit button ( also using a hidden input for the pageID)

The datepickers are unique and working independently, but when it comes to posting the data via ajax and handling it in a php script, It's not inserting data into my db because the names of my two inputs are not unique. I don't really know how to make them unique on the form and then handle those unique names back in the script.

 

Only one form will be submitted at a time so I'm trying to make it to where the user can click on any of these datepickers, select a date and submit, and the ajax will handle only the page ID and the datepicker value for that form submitted and the PHP script will then insert.

 

The sql in my php script works but my POST variables are where I'm having the issue here. Any help is much appreciated.

 

<?php foreach($expiredPages as $expiredPage): ?>

  <form id="updateTime_<?php echo $expiredPage['id']?>" class="updateTime" method="POST">
     
    <input type="hidden" name="currentPageID<?php echo $expiredPage['id']?>" 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>
    </div>

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

  </form>

<?php endforeach; ?>

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

 

[Barand]

Why are you reloading the document after the AJAX call? Doesn't that defeat the object of using AJAX?

You may as well just submit the form.

[thenorman138]

I only put that in for another testing function, but upon success I'm removing it

[requinix]

<?php foreach($expiredPages as $expiredPage): ?>
	  <form 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" />
      <span class="input-group-addon" data-target="#datetimepicker_<?php echo $expiredPage['id']?>" data-toggle="datetimepicker">
      <span class="fa fa-calendar"></span>
      </span>
    </div>
	    <input type="submit" name="Extend Date" class="extendDate">
	  </form>
<?php endforeach; ?>

- No IDs anywhere except what the date picker needs
- No page IDs in the form names so each form works fine in its own right

$(".extendDate").click(function(event){
    event.preventDefault();
    var ser = $(this).closest("form").serialize();
    console.log(ser);
    // AJAX Code To Submit Form.
    $.ajax({
        type: "POST",
        url: "extendTime.php",
        data: ser,
        dataType: 'json',
        cache: false,
        success: function(response){
            console.log(response);
        }
    });
});

- Pass the event as a function parameter
- Serialize only the parent form whose button was clicked
- You can log the response and not reload
- Don't name your variables ambiguous things like "string"

Now fix your PHP code to match.

[thenorman138]

@requinix thank you for your answer.

 

I've tried this using this for my php:

 

$pageID = $_POST['currentPageID'];
$newTime = $_POST['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';
";

But I'm still getting an error in my developer network console:

 

"Undefined index: currentPageID

Undefined index: datePicker

Call to a memeber function format() on boolean"

[ginerjm]

Do a var_dump on your $_POST array and see what elements you did receive.  That may help you diagnose why the two errors are occurring, since they aren't there.

[Barand]

You need to check that data has been posted to your form

if ($_SERVER['REQUEST_METHOD']=='POST') {

    // do your processing of posted data here

}

 

Edited September 25, 2018 by Barand

[thenorman138]

@ginerjm thank you,  you're right. I'm dumping each variable and they return NULL

[requinix]

4 hours ago, thenorman138 said:

But I'm still getting an error in my developer network console:

That same developer console should be able to show you network requests. Such as the AJAX call that went to your script. You'll be able to see there whether it was sent by POST and what data was submitted.

[ginerjm]

You're dumping the entire $_POST array as I suggested and getting null for the entire array as a single value?  Then you are not getting a POST from your client.  Do as suggested by Barand and check the request method on the top of your form before doing anything else. 

Just to be sure you are aware  - most form elements will show up in your post array when a post happens.  Checkboxes will not if no box was actually checked.  So an input element such as a text will always appear (even tho it is empty) in the post array var dump but the checkbox will not.