javascript - Get value from select input in AJAX/PHP retrieved innerhtml for form submit
Get the solution ↓↓↓
I'm new to the AJAX thing, but seems fairly simple. I have a form page that has a select input, when the user selects a certain option, the AJAX populates an innerhtml div with the timeslot.php. The timeslot.php has another dynamically created select input with the options that are populated from a Mysql database. My problem is getting the value back to the form page so when the user clicks submit, that value (hidden input) is included in the submit. I figured it would be pretty straight forward, but what I have does not work. Any help with this would be appreciated.
HTML form:
<?php
$omitDay = 'Sunday'; //Sunday is a permanant day off from curbside service
if ('17:00:00' <= date("H:i:s")){ //ADDED date("H:i:s", strtotime(time()))
$start = date("Y-m-d", strtotime("+1 day", strtotime(date("Y-m-d"))));
} else {
$start = date("Y-m-d");
}
$end = date("Y-m-d", strtotime("+6 day", strtotime(date("Y-m-d"))));
?>
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
var timeslotvalue = document.getElementByID("timeslot").value;
alert(timeslotvalue);
}
};
xmlhttp.open("GET","timeslot.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<div style="clear:both; margin-bottom: 20px;">
<input type="hidden" name="timeslot"> Javascript value from Timeslot select </input>
<select name="users" onchange="showUser(this.value)"><option value="">Select a Pickup Day</option>
<?php
$datediff = strtotime($end) - strtotime($start);
$datediff = floor($datediff/(60*60*24));
for($i = 0; $i < $datediff + 1; $i++){
$todaysDate = date("l, F d", strtotime($start . '+' . $i . 'day'));
$day = date('l', strtotime($start . '+' . $i . 'day'));
if($day != $omitDay) {
echo '<option value="' . strtotime($todaysDate) .'">'. $todaysDate . '</option>';
}
}
?>
</select>
</div>
</form>
<br>
<div id="txtHint">Select goes here</div>
</body>
</html>
This is my php file with select input (I do not have the SQL database in this code, not the issue)
<?php
date_default_timezone_set('America/New_York');
$startTime = time() + (60 * 60 * 4
);
$timeIncrements = array('08:15:00','08:20:00','08:25:00','08:30:00','08:35:00','08:40:00','08:45:00','08:50:00','08:55:00','09:00:00','09:05:00','09:10:00','09:15:00','09:20:00','09:25:00','09:30:00','09:35:00','09:40:00','09:45:00',
'09:50:00','09:55:00','10:00:00','10:05:00','10:10:00','10:15:00','10:20:00','10:25:00','10:30:00','10:35:00','10:40:00','10:45:00','10:50:00','10:55:00','11:00:00','11:05:00','11:10:00','11:15:00','11:20:00','11:25:00','11:30:00',
'11:35:00','11:40:00','11:45:00','11:50:00','11:55:00','13:00:00','13:05:00','13:10:00','13:15:00','13:20:00','13:25:00','13:30:00','13:35:00','13:40:00','13:45:00','13:50:00','13:55:00','14:00:00','14:05:00','14:10:00','14:15:00',
'14:20:00','14:25:00','14:30:00','14:35:00','14:40:00','14:45:00','14:50:00','14:55:00','15:00:00','15:05:00','15:10:00','15:15:00','15:20:00','15:25:00','15:30:00','15:35:00','15:40:00','15:45:00','15:50:00','15:55:00','16:00:00',
'16:05:00','16:10:00','16:15:00','16:20:00','16:25:00','16:30:00','16:35:00','16:40:00','16:45:00','16:50:00','16:55:00');
$omitTime = array('08:25:00'); // to be pulled from database as users select their timeslot and it's saved
$timeIncrements = array_diff( $timeIncrements, $omitTime ); // takes out the omitted times
$q = $_GET['q'] . '<br />';
// Database select here
echo '<select name="timeslot" id="timeslot"><option value="">Select a Pickup Time</option>';
foreach ($timeIncrements as $timeslot) {
if ($startTime <= strtotime($timeslot)) { //starttime = 0000000000 /timeslot = 00:00:00
echo '<option value="' . date("h:i a", strtotime($timeslot)) .'">'. date("h:i a", strtotime($timeslot)) . '</option>';
}
}
echo '</select>';
?>
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: illegal string offset
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.