<?php
require_once('dbconfig.php');
$sql = "SELECT * FROM kpi_detail";
$result = $conn->query($sql);
while($row = $result->fetch_assoc()){
?>
<tbody>
<tr id="<?php echo $row['id'] ?>">
<td><?php echo $row['id'] ?></td>
<td><?php echo $row['kpi_name'] ?></td>
<td><?php echo $row['target'] ?></td>
<td><?php echo $row['current_data'] ?></td>
<td><input type="text" id="dt1" value="<?php echo $row['start_date'] ?>"></td>
<td><input type="text" id="dt2" value="<?php echo $row['end_date'] ?>"></td>
<td><button type="submit" onclick="SubmitDate();">Save</button></td>
<td><select name="DateList"><option selected>Select date</option></select></td>
</tr>
</tbody>
<?php } ?></table>
<script type="text/javascript">
var startDate = new Date($('#dt1').val()); //YYYY-MM-DD
var endDate = new Date($('#dt2').val()); //YYYY-MM-DD
console.log($('#dt1').val());
var getDateArray = function(start, end) {
var arr = new Array();
var dt = new Date(start);
while (dt <= end) {
arr.push(new Date(dt));
dt.setDate(dt.getDate() + 1);
}
return arr;
}
var dateArr = getDateArray(startDate, endDate);
var sel = document.querySelector("select[name='DateList']");
for (var i = 0; i < dateArr.length; i++) {
var opt = document.createElement('option');
opt.innerHTML = dateArr[i].toLocaleDateString("en-US");
opt.value = dateArr[i].toLocaleDateString("en-US");
sel.appendChild(opt);
}
</script>
After I insert the first data and select the start Date and end Date in a form, the value of start Date and end Date will store in the date Arr JavaScript variable. If I insert another data in the form and select the start Date and end Date, the second data onward won't receive the date of start Date to end Date. Need a solution to get every value of date I had selected and insert in the select option value. enter image description here enter image description here
There is a problem with your code in these statements
<td><input type="text" id="dt1" value="<?php echo $row['start_date'] ?>"></td>
<td><input type="text" id="dt2" value="<?php echo $row['end_date'] ?>"></td>
Use class instead of ids as there will many duplicate ids. So change your code like this:
<td><input type="text" class="dt1" value="<?php echo $row['start_date'] ?>" id="<?php echo $row['start_date'] ?>"></td>
<td><input type="text" class="dt2" value="<?php echo $row['end_date'] ?>" id="<?php echo $row['end_date'] ?>"></td>
Now in your JQuery code you can get values like this:
$(".dt1").on('change',function()
{
var start_date=$(this).attr('id');
});
In your PHP:
<td>
<input type="text" class="startDate" value="<?php echo $row['start_date'] ?>">
</td>
<td>
<input type="text" class="endDate" value="<?php echo $row['end_date'] ?>">
</td>
And in your JS:
var getDateArray = function (start, end) {
var arr = new Array();
var dt = new Date(start);
end = new Date(end);
while (dt <= end) {
arr.push(new Date(dt));
dt.setDate(dt.getDate() + 1);
}
return arr;
};
$("tr").each(
function (index) {
var startDate = $(this).find('.startDate').attr('value');
var endDate = $(this).find('.endDate').attr('value');
var dateArr = getDateArray(startDate, endDate);
var sel = $(this).find("select[name='DateList']");
for (var i = 0; i < dateArr.length; i++) {
var value = dateArr[i].toLocaleDateString("en-US");
var opt = new Option(value, value);
sel.append(opt);
}
}
);
There are a couple of problems in your code that should be fixed: you should not use same ID for diffreent elements. The tbody element also should be outside of your loop.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.