I have a simple program, and it works 100% in Firefox and Chrome, but it doesn’t work in Internet Explorer (version 9).
A popup window is called from a page that lists all the scheduled appointments for the day. This is the code to that popup window:
<?php
$name = $_GET['name'];
#$type = $_GET['type'];
$type = "Regular";
$id = $_GET['id'];
?>
<!doctype html>
<html>
<head>
<title><?php echo $name; ?></title>
<style type="text/css">
body {
font-family: Georgia;
}
.col1 {
float: left;
padding-right: .75em;
}
.col1 div { height: 1.5em; }
.col2 div { height: 1.5em; }
.col2 {
float: left;
padding-right: .5em;
}
.notes {
clear: both;
}
</style>
<script type="text/javascript">
function saveClose() {
var xmlhttp;
var getstring = "";
var d = document;
var start_hour = d.getElementsByName('start_hour')[0].value;
var start_min = d.getElementsByName('start_min')[0].value;
var start_am = d.getElementsByName('start_am')[0].value;
var end_hour = d.getElementsByName('end_hour')[0].value;
var end_min = d.getElementsByName('end_min')[0].value;
var end_am = d.getElementsByName('end_am')[0].value;
var no_show = d.getElementsByName('no_show')[0].checked;
var notes = d.getElementsByName('notes')[0].value;
getstring += "?type=<?php echo $type ?>";
getstring += "&id=<?php echo $id ?>";
getstring += "&s_hour="+start_hour;
getstring += "&s_min=" +start_min;
getstring += "&s_am=" +start_am;
getstring += "&e_hour="+end_hour;
getstring += "&e_min=" +end_min;
getstring += "&e_am=" +end_am;
getstring += "&ns=" +no_show;
getstring += "¬es=" +notes;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari;
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5;
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
var reply = xmlhttp.responseText;
if (reply == "Successful!") {
setTimeout('self.close()', 1000);
} else {
document.getElementById('resultsContent').innerHTML = xmlhttp.responseText;
}
} else {
document.getElementById('resultsContent').innerHTML = "Saving...";
}
}
xmlhttp.open("GET", "saveClose.php"+getstring, true);
xmlhttp.send();
}
</script>
</head>
<body>
<div><h2><?php echo $name; ?>'s Consult</h2></div>
<div class="col1">
<div>Consult Start Time:</div>
<div>Consult End Time:</div>
<div>No Show? :</div>
</div>
<div class="col2">
<div>
<select name="start_hour">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
:
<select name="start_min">
<option></option>
<option>00</option>
<option>05</option>
<option>10</option>
<option>15</option>
<option>20</option>
<option>25</option>
<option>30</option>
<option>35</option>
<option>40</option>
<option>45</option>
<option>50</option>
<option>55</option>
</select>
-
<select name="start_am">
<option></option>
<option>AM</option>
<option>PM</option>
</select>
</div>
<div>
<select name="end_hour">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
:
<select name="end_min">
<option></option>
<option>00</option>
<option>05</option>
<option>10</option>
<option>15</option>
<option>20</option>
<option>25</option>
<option>30</option>
<option>35</option>
<option>40</option>
<option>45</option>
<option>50</option>
<option>55</option>
</select>
-
<select name="end_am">
<option></option>
<option>AM</option>
<option>PM</option>
</select>
</div>
<div><input type="checkbox" name="no_show" /></div>
</div>
<div class="notes">Notes:</div>
<div class="notes"><textarea name="notes" rows="5" cols="53"></textarea></div>
<div class="notes"><button type="button" onClick="saveClose();">Save & Close</button><span id="resultsContent" style="padding-left:1em"></span></div>
</body>
</html>
The AJAX call runs this PHP script:
<?php
$type = $_GET['type'];
$id = $_GET['id'];
$s_hour = $_GET['s_hour'];
$s_min = $_GET['s_min'];
$s_am = $_GET['s_am'];
$e_hour = $_GET['e_hour'];
$e_min = $_GET['e_min'];
$e_am = $_GET['e_am'];
$ns = $_GET['ns'];
$ns = (($ns == "true") ? "1" : "0");
$notes = $_GET['notes'];
switch (true) {
case empty($type):
echo "\$type is broken!";
break;
case empty($s_hour):
echo "\$s_hour is broken!";
break;
case empty($s_min):
echo "\$s_min is broken!";
break;
case empty($s_am):
echo "\$s_am is broken!";
break;
case empty($e_hour):
echo "\$e_hour is broken!";
break;
case empty($e_min):
echo "\$e_min is broken!";
break;
case empty($e_am):
echo "\$e_am is broken!";
break;
case (!isset($ns)):
echo "\$ns is broken!";
break;
case (!isset($notes)):
echo "\$notes is broken!";
break;
default:
// SALES APPTS.
# ...
# ...
# ...
// OTHER APPTS.
# ...
# ...
# ...
echo "Successful!";
break;
}
?>
Like expected, Firefox and Chrome halt on every case statement until both the start time and end time are selected. Works perfectly.
IE, however, will halt on case empty($s_hour): every single time, no matter what. I can’t even get past that first case statement to see if the rest are broken too. I do not understand.
Any help would be greatly appreciated, as this application must be IE9 compatible.
You are trying to read the value of the value of the select boxes, but the ‘value’ property may not be populated as you expect, because it’s trying to get the value property from the selected option, not the text of that option.
You should either add an explicit value attribute to the
<option>elements like so:or explicitly get the text of the selected option, like so:
(I’ve used a temp var to hold the object for brevity since we have to reference it twice)
Hope that helps.