The goal here is to set the SELECT value if the page has form data that would set it.
I’m not entirely sure what the correct way to do this is, but I have tried all of the following:
document.getElementById(“base_terrain”).options[document.getElementById(“base_terrain”).selectedIndex].value =
document.getElementById(“base_terrain”).value =
document.getElementById(“base_terrain”).selectedIndex =
I use the first one’s syntax to read its value elsewhere, so I assumed it would work just as well for setting it, but no such luck. The other two are things I’ve seen in other solutions presented online.
Here is the snippet of html code first (I don’t think there is anything wrong with this part but I’m including it anyway):
<select name="base_terrain" id="base_terrain">
<option value="0">Unknown</option>
<?php
for($i=0;$i<sizeof($terrain_types["Index"]);$i++)
{
echo ('<option value="'.$terrain_types["Index"][$i].'">'.$terrain_types["Name"][$i].'</option>');
}
?>
</select>
Then in the HEAD here is the relevant script block:
<script>
<?php
if(isset($_POST["terrain_preselected"]))
{
echo "var terrain_selected = ".$_POST["terrain_selected"].";\n");
}
?>
window.onload = from_terrain_generator();
function from_terrain_generator()
{
window.alert("attempting to set select to "+terrain_selected);
document.getElementById("base_terrain").value = terrain_selected;
document.getElementById("base_terrain").disabled = true;
}
</script>
When the page is loaded coming from the page with the form data, the window.alert (just for debugging purposes) fires with the correct value displayed. Neither of the two following lines do anything. I’ve also tried commenting out the middle line to see if I could disable the select, but no. It appears that this block of code cannot do anything to touch the SELECT. Indeed, I’ve tried adding another window.alert to read the current selected value of the SELECT:
window.alert(document.getElementById('base_terrain').options[document.getElementById('base_terrain').selectedIndex].value);
This does not fire.
My gut says that the SELECT does not yet exist when this code is being triggered, but I’m not sure why that would be the case since googling suggested that window.onload is how you run a function after all of the page content has loaded. There are numerous other examples of people asking how to set a SELECT by code and as far as I can tell I am following the solutions presented for those other questions.
EDIT: a couple other things I have tried:
Based on another solution I found, I tried replacing window.onload with this line:
document.addListenerEvent('DOMContentLoaded',from_terrain_generator(),false);
This works exactly like the window.onload version, in that it fires the first window.alert but any line referring to the SELECT fails.
I also tried putting onload in the SELECT tag, like this:
<select id="base_terrain" name="base_terrain" onload='from_terrain_generator()'>
Tried that with and without semi-colon after function call (I know it isn’t supposed to require one if the event has only one function, but figured I would try anyway - I’m trying anything I can think of). This doesn’t even fire the first window.alert.
EDIT 2: sigh… also tried this solution I found somewhere:
window.onload = function() {
window.document.body.onload = from_terrain_generator;
};
The source for this solution say not to include parentheses when listing the function name. Anyway, this would not trigger the function at all (not even the first window.alert, which I’ve at least been able to get in a couple other methods).
EDIT 3: I have solved the initial problem of getting the page to load completely before running the function. The solution in EDIT 2 was correct, except that you do in fact need the parentheses after the function name. It’s weird because the person who posted that solution made a point of saying not to include the parentheses or it wouldn’t work. It’s amazing how many incorrect solutions to programming problems are out there (it doesn’t help that Google often puts results at the top from 10-15 years ago).
With that solved, I’ve also been able to determine which is the correct code to set the SELECT based on the value of the option. It’s important to distinguish this because selectedIndex will simply go by the order of OPTIONs. The correct syntax to use in this case is:
document.getElementById('base_terrain').value = terrain_selected;
Well, I guess this is solved.