Function not working in Firefox

JavaScript function not working in Firefox

[Tourex]

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]

<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>"; 
}