我在使用datepicker提交数据库更新时遇到问题,我认为这与没有唯一的datepicker实例有关。
当前,我正在使用一个foreach循环(基于SELECT语句)来构建div节,每个节都有自己的形式,用于显示当前日期和一个datepicker实例来设置新日期。
日期选择器显示为输入,但是,无论我单击哪个按钮,日期选择器只会在第一个扩展。我认为这是由于datepicker输入中的名称不唯一,但我认为这也导致了我的ajax和db插入出现问题。
基本上,此电流回路目前可建立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>
extendTime.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);
答案 0 :(得分: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'];