description:
Have a form with 3 drop downs. First one have values, the second is populated based on the selected value in first select, the 3rd is populated with values based on the selection in the 2nd drop down.
Problem:
All work fine with IE and FF, but not in Safari and Opera. The actual population work fine, BUT right after the 3rd drop down is populated with values, the second drop down disappear at all. And as result, when the form is submitted, that field and it's value are not passed.
Solution:
I did not find yet a good/real solution for this issue, but just a workaround. What i've done, was to create a hidden form field that get populated with the selected value in the second drop down on the onchange action.
To illustrate this better here is an emulated example:
The JS code look like this:
<script language="JavaScript" type="text/javascript">
<!--
var xmlhttp
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp=false
}
}
function loadFragmentInToElement(fragment_url, element_id)
{
var element = document.getElementById(element_id);
var theURL = fragment_url
element.innerHTML = '<center><img src="images/loading_.gif"></center>';
xmlhttp.open("GET", fragment_url);
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
element.innerHTML = xmlhttp.responseText;
}
else element.innerHTML = ';
}
xmlhttp.setRequestHeader('Accept','message/x-jl-formresult')
xmlhttp.send(null);
return false;
}
//-->
</script>
The base script (1.cfm):
<form name="frm" action="_1.cfm" method="post">
<table>
<tr>
<td>value 1:</td>
<td>
<cfoutput>
<select name="fld1" id="fld1" onchange="return loadFragmentInToElement('_2.cfm?rnd=#RandRange(1,99999)#&fld1v='+this.value, 'spn1')">
<option value="">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
</select>
</cfoutput>
</td>
</tr>
<tr>
<td>Value 2:</td>
<td>
<span id="spn1">
<select name="fld2" id="fld2">
<option value="">
</select>
</span>
</td>
</tr>
<tr>
<td>Value 3:</td>
<td>
<span id="spn2">
<select name="fld3" id="fld3">
<option value="">
</select>
</span>
</td>
</tr>
<tr>
<td colspan="2"><input type="Submit" value="Submit"></td>
</tr>
</table>
</form>
The code for _2.cfm:
<cfsetting showdebugoutput="No">
<cfoutput>
<select name="fld2" id="fld2" onchange="return loadFragmentInToElement('_3.cfm?rnd=#RandRange(1,99999)#&fld1v=#fld1v#&fld2v='+this.value, 'spn2')">
<option value="#fld1v#1">#fld1v#1
<option value="#fld1v#2">#fld1v#2
<option value="#fld1v#3">#fld1v#3
<option value="#fld1v#4">#fld1v#4
<option value="#fld1v#5">#fld1v#5
<option value="#fld1v#6">#fld1v#6
<option value="#fld1v#7">#fld1v#7
<option value="#fld1v#8">#fld1v#8
<option value="#fld1v#9">#fld1v#9
</select>
</cfoutput>
The code for _3.cfm:
<cfsetting showdebugoutput="No">
<cfoutput>
<select name="fld3" id="fld3">
<option value="#fld1v##fld2v#1">#fld1v##fld2v#1
<option value="#fld1v##fld2v#2">#fld1v##fld2v#2
<option value="#fld1v##fld2v#3">#fld1v##fld2v#3
<option value="#fld1v##fld2v#4">#fld1v##fld2v#4
<option value="#fld1v##fld2v#5">#fld1v##fld2v#5
<option value="#fld1v##fld2v#6">#fld1v##fld2v#6
<option value="#fld1v##fld2v#7">#fld1v##fld2v#7
<option value="#fld1v##fld2v#8">#fld1v##fld2v#8
<option value="#fld1v##fld2v#9">#fld1v##fld2v#9
</select>
</cfoutput>
So, the current solution was to add
<input name="hfld2" type="Hidden" value="">
to _1.cfm andonchange="document.frm.hfld2.value=this.value;return loadFragmentInToElement('_3.cfm?rnd=#RandRange(1,99999)#&fld1v=#fld1v#&fld2v='+this.value, 'spn2')"
instead ofonchange="return loadFragmentInToElement('_3.cfm?rnd=#RandRange(1,99999)#&fld1v=#fld1v#&fld2v='+this.value, 'spn2')"
to _2.cfm .If anyone have any clue about a real solution to this problem, please don't hesitate to comment on it.