Populating a SELECT list with HTTPRequest

B

bobsawyer

I've been building a series of SELECT lists that are populated
dynamically using HTTPRequest. Things are going pretty well, and I've
got the whole thing working flawlessly in Mozilla/Firebird.
Unfortunately, Internet Explorer doesn't quite work as expected -- it
gives me an "invalid argument" error that I don't know how to fix.

Here's the entire script, with form, annotated to explain what I'm
doing and where the problem is occurring. I would link the URL where
the form resides on the server, but cannot due to security concerns.

Thing is, I just don't know what to do to fix it. In a nutshell, when
you click on the first set of radio buttons, nothing happens. If you
click again, it then populates the first SELECT list in the first row.
It SHOULD populate the list on the first click. Additionally, if you
skip the first row and go to the second, and click a radio button, it
populates the SELECT in the FIRST row, rather than the second.

If anyone can assist me with this I would be really grateful. I've
managed to piece this together today despite not really knowing much
about Javascript, but I've hit the wall with this error. Thanks!

-Bob

-------------------------
<html>
<script>
var xmlDoc = null ;
var c = '';
var d = '';
var o = '';
var m = '';
var z = '';
var y = '';

function loadBrands(c,d) {
if (typeof window.ActiveXObject != 'undefined' ) {
xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
xmlDoc.onreadystatechange = processBrands ;

else {
xmlDoc = new XMLHttpRequest();
xmlDoc.onload = processBrands ;
}
xmlDoc.open( "GET", "getbrands.php?cond="+c, true );
xmlDoc.send( null );
document.foo.condselect.value = c; // inserting the value of c into a
text form element so I can reference it later
document.foo.brandselect.value = 'brands'+d; // inserting 'brands' +
the value of d into a text form element so I can reference it later
}

function processBrands() {
if ( xmlDoc.readyState != 4 ) return ;
delX= "\n";
delY= ",";
valArray = xmlDoc.responseText.split(delX);
d = document.foo.brandselect.value; // getting that first value from
the text element below
document.getElementById(d).options.length = 0; // this
is where IE tells me the error is occurring, at the 'getElementById(d)'
position

for (var i=0; i <= valArray.length; i++ ) {
pairArray = valArray.split(delY);
document.getElementById(d).options = new Option(pairArray[1],
pairArray[0]);
}
}

function loadModels(m,z,y) {
if (typeof window.ActiveXObject != 'undefined' ) {
xmlDoc2 = new ActiveXObject("Microsoft.XMLHTTP");
xmlDoc2.onreadystatechange = processModels ;
}
else {
xmlDoc2 = new XMLHttpRequest();
xmlDoc2.onload = processModels ;
}
alert('getmodels.php?model='+m+'&cond='+z);
xmlDoc2.open( "GET", "getmodels.php?model="+m+"&cond="+z, true
);
xmlDoc2.send( null );
document.foo.modelselect.value = 'models'+y;
}

function processModels() {
if ( xmlDoc2.readyState != 4 ) return ;
delX= "\n";
delY= ",";
valArray2 = xmlDoc2.responseText.split(delX);
e = document.foo.modelselect.value;
document.getElementById(e).options.length = 0;

for (var i=0; i <= valArray2.length; i++ ) {
pairArray2 = valArray2.split(delY);
document.getElementById(e).options = new Option(pairArray2[1],
pairArray2[0]);
}
}

</script>

<body>
<form name="foo">
<input type="radio" name="condition1" value="0"
onclick="loadBrands(0,1)" />New
<input type="radio" name="condition1" value="1"
onclick="loadBrands(1,1)" />Used

<select name="brands1" id="brands1"
onchange="loadModels(this.value,document.foo.condselect.value,1);">
<option value="">Select...</option>
</select>

<select name="models1" id="models1">
<option value="">Select...</option>
</select>

<br />

<input type="radio" name="condition2" value="0"
onclick="loadBrands(0,2)" />New
<input type="radio" name="condition2" value="1"
onclick="loadBrands(1,2)" />Used

<select name="brands2" id="brands2"
onchange="loadModels(this.value,document.foo.condselect.value,2);">
<option value="">Select...</option>
</select>

<select name="models2" id="models2">
<option value="">Select...</option>
</select>

<br />

<input type="radio" name="condition3" value="0"
onclick="loadBrands(0,3)" />New
<input type="radio" name="condition3" value="1"
onclick="loadBrands(1,3)" />Used

<select name="brands3" id="brands3"
onchange="loadModels(this.value,document.foo.condselect.value,3);">
<option value="">Select...</option>
</select>

<select name="models3" id="models3">
<option value="">Select...</option>
</select>

<br />
<!-- these hidden fields are used to hold values generated by the
functions in the script at the top of the page -->
<input type="hidden" id="condselect" name="condselect" />
<input type="hidden" id="brandselect" name="brandselect" />
<input type="hidden" id="modelselect" name="modelselect" />
</form>
</body>
</html>
--------------------------------
 
M

McKirahan

I've been building a series of SELECT lists that are populated
dynamically using HTTPRequest. Things are going pretty well, and I've
got the whole thing working flawlessly in Mozilla/Firebird.
Unfortunately, Internet Explorer doesn't quite work as expected -- it
gives me an "invalid argument" error that I don't know how to fix.

Here's the entire script, with form, annotated to explain what I'm
doing and where the problem is occurring. I would link the URL where
the form resides on the server, but cannot due to security concerns.

Thing is, I just don't know what to do to fix it. In a nutshell, when
you click on the first set of radio buttons, nothing happens. If you
click again, it then populates the first SELECT list in the first row.
It SHOULD populate the list on the first click. Additionally, if you
skip the first row and go to the second, and click a radio button, it
populates the SELECT in the FIRST row, rather than the second.

If anyone can assist me with this I would be really grateful. I've
managed to piece this together today despite not really knowing much
about Javascript, but I've hit the wall with this error. Thanks!

-Bob

-------------------------
<html>
<script>
var xmlDoc = null ;
var c = '';
var d = '';
var o = '';
var m = '';
var z = '';
var y = '';

function loadBrands(c,d) {
if (typeof window.ActiveXObject != 'undefined' ) {
xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
xmlDoc.onreadystatechange = processBrands ;

else {
xmlDoc = new XMLHttpRequest();
xmlDoc.onload = processBrands ;
}
xmlDoc.open( "GET", "getbrands.php?cond="+c, true );
xmlDoc.send( null );
document.foo.condselect.value = c; // inserting the value of c into a
text form element so I can reference it later
document.foo.brandselect.value = 'brands'+d; // inserting 'brands' +
the value of d into a text form element so I can reference it later
}

function processBrands() {
if ( xmlDoc.readyState != 4 ) return ;
delX= "\n";
delY= ",";
valArray = xmlDoc.responseText.split(delX);
d = document.foo.brandselect.value; // getting that first value from
the text element below
document.getElementById(d).options.length = 0; // this
is where IE tells me the error is occurring, at the 'getElementById(d)'
position

for (var i=0; i <= valArray.length; i++ ) {
pairArray = valArray.split(delY);
document.getElementById(d).options = new Option(pairArray[1],
pairArray[0]);
}
}

function loadModels(m,z,y) {
if (typeof window.ActiveXObject != 'undefined' ) {
xmlDoc2 = new ActiveXObject("Microsoft.XMLHTTP");
xmlDoc2.onreadystatechange = processModels ;
}
else {
xmlDoc2 = new XMLHttpRequest();
xmlDoc2.onload = processModels ;
}
alert('getmodels.php?model='+m+'&cond='+z);
xmlDoc2.open( "GET", "getmodels.php?model="+m+"&cond="+z, true
);
xmlDoc2.send( null );
document.foo.modelselect.value = 'models'+y;
}

function processModels() {
if ( xmlDoc2.readyState != 4 ) return ;
delX= "\n";
delY= ",";
valArray2 = xmlDoc2.responseText.split(delX);
e = document.foo.modelselect.value;
document.getElementById(e).options.length = 0;

for (var i=0; i <= valArray2.length; i++ ) {
pairArray2 = valArray2.split(delY);
document.getElementById(e).options = new Option(pairArray2[1],
pairArray2[0]);
}
}

</script>

<body>
<form name="foo">
<input type="radio" name="condition1" value="0"
onclick="loadBrands(0,1)" />New
<input type="radio" name="condition1" value="1"
onclick="loadBrands(1,1)" />Used

<select name="brands1" id="brands1"
onchange="loadModels(this.value,document.foo.condselect.value,1);">
<option value="">Select...</option>
</select>

<select name="models1" id="models1">
<option value="">Select...</option>
</select>

<br />

<input type="radio" name="condition2" value="0"
onclick="loadBrands(0,2)" />New
<input type="radio" name="condition2" value="1"
onclick="loadBrands(1,2)" />Used

<select name="brands2" id="brands2"
onchange="loadModels(this.value,document.foo.condselect.value,2);">
<option value="">Select...</option>
</select>

<select name="models2" id="models2">
<option value="">Select...</option>
</select>

<br />

<input type="radio" name="condition3" value="0"
onclick="loadBrands(0,3)" />New
<input type="radio" name="condition3" value="1"
onclick="loadBrands(1,3)" />Used

<select name="brands3" id="brands3"
onchange="loadModels(this.value,document.foo.condselect.value,3);">
<option value="">Select...</option>
</select>

<select name="models3" id="models3">
<option value="">Select...</option>
</select>

<br />
<!-- these hidden fields are used to hold values generated by the
functions in the script at the top of the page -->
<input type="hidden" id="condselect" name="condselect" />
<input type="hidden" id="brandselect" name="brandselect" />
<input type="hidden" id="modelselect" name="modelselect" />
</form>
</body>
</html>
Click to expand...


1) missing a "}" before your first "else"

2) Clicking a radio button calls "loadBrands()"
which calls "processBrands()"
which has "d = document.foo.brandselect.value;"
which is blank causing the following line to crash:
"document.getElementById(d).options.length = 0;"

3) What does this do?
"if (typeof window.ActiveXObject != 'undefined' )"
 
B

bobsawyer

1) the missing "}" is there ... at least in my local script. The "else"
that comes before it is just on the next line.

2) "d = document.foo.brandselect.value" is supposed to be set in the
loadbrands() function. It sets a hidden form field to that value, and
then picks it back up in the processbrands() function

3) it tells the script to use the ActiveXObject for the XMLHTTPRequest
rather than the DOM's XMLHTTPRequest object, presumably because IE
doesn't have the XMLHTTPRequest in its DOM. Or something like that.

Interestingly enough, I found that the script works fine in IE on my
personal server (I copied the script there for further testing after
hours) but not on my employer's server. See for yourself here:

http://www.builtforthefuture.com/dev/af/test.php

Thanks,
-Bob
 
M

McKirahan

1) the missing "}" is there ... at least in my local script. The "else"
that comes before it is just on the next line.

2) "d = document.foo.brandselect.value" is supposed to be set in the
loadbrands() function. It sets a hidden form field to that value, and
then picks it back up in the processbrands() function

3) it tells the script to use the ActiveXObject for the XMLHTTPRequest
rather than the DOM's XMLHTTPRequest object, presumably because IE
doesn't have the XMLHTTPRequest in its DOM. Or something like that.

Interestingly enough, I found that the script works fine in IE on my
personal server (I copied the script there for further testing after
hours) but not on my employer's server. See for yourself here:

http://www.builtforthefuture.com/dev/af/test.php

Thanks,
-Bob
Click to expand...

I get various errors using IE5.5:

Line: 32
Error: Invalid argument

Line: 35
Error: 'valArray[...]' is null or not an object

Line: 64
Error: 'valArray[...]' is null or not an object
 
B

bobsawyer

OK, I believe I've fixed it. It's working properly in IE and not
throwing any more 'valArray[...] is null or not an object' errors
anymore. Here's what I did:

-------------

function processBrands() {
e = document.foo.brandselect.value;
if (xmlDoc.readyState == 4) {
// only if "OK"
if (xmlDoc.status == 200) {
delX= "\n";
delY= ",";
valArray = xmlDoc.responseText.split(delX);
document.getElementById(e).options.length = 0;
var valArraylen = valArray.length - 1;
for (var i=0; i <= valArraylen; i++ ) {
pairArray = valArray.split(delY);
document.getElementById(e).options = new
Option(pairArray[1], pairArray[0]);
}
} else {
alert("There was a problem retrieving the data:\n" +
xmlDoc.statusText);
}
}
}

----------------

I moved 'e = document.foo.brandselect.value;' to the top of the
function so that the value is assigned to 'e' as soon as the function
fires, rather than at the end.

I perform TWO status checks -- one checking the readyState of the data,
and one checking the status of the server action. There's really no
need for the server status, as the function is pulling data from a
database and not performing an action on an existing file. But I
figured (a) it's a good habit to get into, and (b) it can't hurt to
check.

Finally, for whatever reason, IE was having a problem with
'valArray.length - 1' in the 'for' loop. I assigned that to a variable,
'valArraylen', and used that in the 'for' loop instead. That solved
whatever problem IE was having with the 'valArray[...] is null or not
an object' ... I'm assuming because I assigned the value to
'valArraylen', it became an object and IE was all hunky-dory with it.
But what do I know?

Since that function appears twice in the script (it's pulling different
data), I also updated the second one as well. A few other tweaks per
someone else's suggestion, such as moving the 'document.foo...'
statements to the top of each function probably helped as well.

So - thanks very much to everyone who offered suggestions and
assistance!

Best,
-Bob
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to display input options only after selecting an option from the 'select class' tag JS? 6
Javascrip code wont run properly. 2
How do I fix this issue in sqaurespace code block? 1
Add Image and label dynamically inside the dropdown 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Help with code 0
Need Help, Both submit button works same, i need both submit button works differently, the one button override other button 3

Members online

No members online now.
Total: 59 (members: 2, guests: 57)
Robots: 477

Forum statistics

Threads
473,995
Messages
2,570,228
Members
46,818
Latest member
SapanaCarpetStudio

Latest Threads

Top