| Function not working in Firefox
JavaScript function not working in Firefox |
Tourex
msg:4136061 | 5:36 pm on May 20, 2010 (gmt 0) |
Can someone please help. This is driving me nuts:
Having selected a date (with a Jquery datepicker) my form then needs to call a JavaScript function that populates a drop-down list with valid entries for the user to select. The form opens with a blank select list of the right width for visual neatness.
Everything works brilliantly and as-intended in IE, Chrome, Safari and Opera but NOT in Firefox - which returns a blank select list.
Here is the code...
HTML (abbreviated):
<form action="reservations.php" method="post" id="Enquiries" onsubmit="return Form_Validator(this)">
<label>Arrival Date:</label><input id="dp" onchange="selectNights()" />
<label>Number of Nights:</label><class id="F18J"><select name="F18" id="F18" class="w45"><option value=""></option></select></span>
JavaScript function:
function selectNights() {
var acclist = new Array();
var x = document.getElementById('dp').value.substr(0,3);
if (x == "Mon") {
var dater = new Array(4,7,11,14,18,21,25,28);
} else {
var dater = new Array(3,7,10,14,17,21,24,28);
}
var optlist = "";
for (i=0; i<8; i++) {
optlist = optlist + "<option value=" + dater{i} + ">" + dater{i} + "</option>";
}
F18J.innerHTML = "<select name=\"F18\" id=\"F18\" class=\"w45\">" + optlist + "</select>";
}
NOTE: I've used curly brackets in the for( loop above because I am getting a post error message about styles when I try to post here. Sorry, I'm a newbie to this. How do I post the code properly?
I just can't understand why Firefox doesn't seem to run the selectNights() function and/or populate the F18J option list. Any help will be MUCH appreciated. Thanks in anticipation.
|
Fotiman
msg:4136069 | 5:54 pm on May 20, 2010 (gmt 0) |
<label>Number of Nights:</label><class id="F18J"><select name="F18" id="F18" class="w45"><option value=""></option></select></span>
|
|
Your markup is invalid. Eliminating the label and select elements, you end up with:
<class id="F18J"></span>
Then:
F18J.innerHTML = "<select name=\"F18\" id=\"F18\" class=\"w45\">" + optlist + "</select>";
|
|
You've not defined F18J anywhere. Presumably what you want to do is this:
var F18J = document.getElementById('F18J');
F18J.innerHTML = "<select name=\"F18\" id=\"F18\" class=\"w45\">" + optlist + "</select>";
I think that (along with fixing the <class/span issue) will fix your problem. However, you could also clean up for function a little:
function selectNights() {
var acclist = [],
dater,
F18J = document.getElementById('F18J'),
i,
optlist = "",
x = document.getElementById('dp').value.substr(0,3);
if (x == "Mon") {
dater = [4,7,11,14,18,21,25,28];
} else {
dater = [3,7,10,14,17,21,24,28];
}
for (i = 0; i < 8; i++) {
optlist += "<option value='" + dater[i] + "'>" + dater[i] + "</option>";
}
F18J.innerHTML = "<select name='F18' id='F18' class='w45'>" + optlist + "</select>";
}
|
|
|
|
|
