getElementById() - need Help!

[tmemdy]

I have a form with linked list boxes (Country and State) - here is my function code...

function ChangeDetail(pos) {
pos = pos.COUNTRY.options[pos.COUNTRY.selectedIndex].value;
temp = '<select name="STATE"><option value="">Select Results</option>' + eval("detail" + pos) + '</select>';
if(IE){ newDetail1.innerHTML=(temp)}
else if(NS6) { document.getElementById("newDetail1").write(temp) }
else if(NS){
document.newDetail1.document.write(temp)
document.newDetail1.document.close()
document.write("abcdef");
}


what is happening for users with NS6 is that the country and state are being choosen however only the country is being written into the db record. The state field is blank. And this is only occuring when using NS6. Obviously I'm missing some syntax and js is not my specialty - can someone please help?

[Dr. Web]

lets start at the beginning... what are you trying to do?

state and country boxes.... and then?

[tmemdy]

I have a php form that I'm gathering data and writing to a MySQL database. Netscape will not capture what the user enters for the state - thus creating an empty field in the database. All other fiels are fine its just the state.

[Dr. Web]

lets have a look at that finally rendered form code...

I have no problem getting N6 to capture my selected drop down values.

[tmemdy]

I've actually resolved my problem about getting NS6 to capture my state field - but now I have a new dilemna...

in older versions of Netscape (prior to NS6) I am not able to get the states drop down box to populate. When the user selects the country the state list box is suppose to populate with the appropriate list of states or proviences.
I've gotten it to work in IE5 and NS6...

Here is some excerpts of my code...
<div id=newDetail1>
<select name=STATE>
<option value="" selected>Select a State/Province</option>
</select>
<b></b></div>

***********************************************

<script language=javascript1.2>
IE = (document.all)?1:0;
NS = (document.layers)?1:0;
NS6 = (document.getElementById)?1:0;
************************************************
and here is my function....
function ChangeDetail(pos) {
pos = pos.COUNTRY.options[pos.COUNTRY.selectedIndex].value;
temp = '<select name="STATE">"<option value=" ">Select Results</option>"' + eval("detail" + pos) + '</select>';
if(IE){ newDetail1.innerHTML=(temp)}
else if(NS6) { document.getElementById("newDetail1").innerHTML = temp; }
else if(NS){
document.newDetail1.document.write(temp)
document.newDetail1.document.close()
document.write("abcdef");
}

What is the proper syntax to get Netscape to work properly?

[Jon Hanlon]

Setting the innerHTML of an object is a neat trick, but it's slow and it won't work for NN4.
Once NN4 has rendered a page, then that's it. You can't add any more content. All you can do is show/hide stuff and move stuff around.

If you're coding for NN4, then put your form elemenrts inside a form. Apart from images and links and a couple of other things, the only elements NS4 can address are form elements. The form doesn't have to go anywhere, you just need the <form name=...></form> tags to be able to address it.

Now, the select object has several properties, of interest to us here is the options collection.
Each <option> in HTML has a slot in the options collection.
Setting the options.length property to null or zero effectively erases the collection. There is also a new Option constructor to populate the collection.
[new Option(strText, strValue, [boolSelected], [boolDefault])]


<form name=bozo>
<select name=dogs>
<option value="terrier">Terrier</option>
<option value="dane">Great Dane</option>
<option value="Lassie">Collie</option>
</select>

<input type=button onclick=loadSelect() value="Cartoon">

<script>
function loadSelect() {
var selObj = document.forms.bozo.dogs; // our <select>
seleObj.options.length = 0; // clears all options
selObj.options[0] = new Option("Select a Dog","");
selObj.options[1] = new Option("Scooby-Doo","scooby");
selObj.options[2] = new Option("Snoopy","snoopy",false);
selObj.options[selObj.options.length] = new Option("Astro","astro"); // this format is good inside loops
}
</select>


This code will work for all browsers. If you want to clobber an individual option, just set it to null. (eg. selObj.options[3] = null will delete Astro from the list.

[kdjoergensen]

If you want to use the DOM format to create an option you could write:


<form name=bozo>
<select name=dogs>
<option value="terrier">Terrier</option>
<option value="dane">Great Dane</option>
<option value="Lassie">Collie</option>
</select>
</form>


var selObj = document.getElementById('dogs');
var newDog = document.createElement('0PTION');
var newDogName = document.createTextNode('terror');
newDog.setAttribute('value','boxer');
newDog.appendChild(newDogName);

selObj.appendChild(newDog);


This is what happens:
first the SELECT object named 'dogs' is stored in a variable we call 'selObj'.

Then we create a new OPTION element and store a reference to this new element in a variable named 'newDog'.

Then we create a new textNode (a string of text) and store a reference to this textNode in the variable newDogName.

Then it is time to put it all together:

we set the value attribute of the of newDog variable (which points to the OPTION ELEMENT we created) to the desired value. This is the same as writing: newDog.value = '..', but we are using DOM format to do it.

Then we append the text string ('terror' which is stored in the variable newDogName) to the newDog (option) element. this is similar to writing: myDog.innerHTML = newDogName;

Finally we put the newly created option element into the select element which we captured in the first line using 'getElementById).

If you could view the result it would look like this:

<form name=bozo>
<select name=dogs>
<option value="terrier">Terrier</option>
<option value="dane">Great Dane</option>
<option value="Lassie">Collie</option>
<option value="boxer">Terror</option>
</select>
</form>

[territoryOK]

God I HATE NS4.x,...