...

View Full Version : IE Drop Down Menu Values are missing



blueRain
02-26-2009, 10:09 AM
this is the assumptions:

- 1 input box for height values, 2 radio buttons for meters and feet inches

- if feet inches radio button is enabled the input box will be removed then a 2 drop down menu will be displayed for a feet inches values and vice versa

the problem is this:
- the code below is working in FF, but in IE the values in the drop down is missing..

what is the problem in my code? did i forgot something?

JAVA SCRIPT SRC



function addHeightLbl( flag ){
var hghtDiv = document.getElementById( "hghtDiv" );
var ftIncDivChck = document.getElementById("ftInc");
var mtrDivChck = document.getElementById("meters");

if ( ftIncDivChck == null && flag == true ){
//remove meters label
if( hghtDiv.firstChild )
hghtDiv.removeChild(hghtDiv.firstChild)

var ftIncDiv = document.createElement( "ftIncDiv" );
var select = document.createElement("select");
select.name = "height_ft";

for(var i=3; 7>=i; i++){
var optionFt = document.createElement("option");
optionFt.name = "optionFt";
optionFt.value = i;
optionFt.text = i + "'";
select.appendChild(optionFt);
}
hghtDiv.appendChild(select);

var selectInch = document.createElement("select");
selectInch.name = "height_inches";

for(var i=0; 11>=i; i++){
var optionInch = document.createElement("option");
optionInch.value = i;
optionInch.text = i + "\"";
selectInch.appendChild(optionInch);
}
hghtDiv.appendChild(selectInch);

ftIncDiv.setAttribute("id", "ftInc");
ftIncDiv.innerHTML = "<font size=2> ft-inch(es) &nbsp; &nbsp; </font>";

hghtDiv.appendChild(ftIncDiv);
}


if ( flag == false ){
//remove ft-inches label & downdown
while( hghtDiv.firstChild ){
hghtDiv.removeChild(hghtDiv.firstChild);
}

var mtrDiv = document.createElement( "mtrDiv" );
mtrDiv.setAttribute("id", "meters");
mtrDiv.innerHTML = "<input type=\"text\" name=\"height_meters\" size=9 value=\"${selectMtrs}\"><font size=2> m </font>";
hghtDiv.appendChild(mtrDiv);
}
}


JSP SRC


<td align="right"><font size=2> Height: </font> </td>
<td ><div id="hghtDiv"></div></td>
<td>
<input type="radio" name="height_unit"
c:if test="${ (null eq height_unit) or func:equals( 'ft-in', height_unit ) }">
checked
</c:if>
value="ft-in"
onClick="addHeightLbl( true );"
>
<font size=2>ft-in</font>&nbsp;
</td>

<td>
<input type="radio" name="height_unit"
c:if test="${ not (null eq height_unit) and func:equals( 'meter/s', height_unit ) }">
checked
</c:if>

value="meter/s" onClick="addHeightLbl( false );"
>

<font size=2>m</font>&nbsp;
</td>


here is the form:

FF Snapshots:
http://img291.imageshack.us/img291/7484/bmi.png

http://img99.imageshack.us/img99/3539/bmi2.png

IE Snapshot:
http://img204.imageshack.us/img204/3302/bmi1.png

abduraooft
02-26-2009, 10:15 AM
Could you post your html as well, so that we will be able to execute the script at our end, or a link would be better!

blueRain
02-26-2009, 10:20 AM
sure sure..

ill update the code asap.. :)


Could you post your html as well, so that we will be able to execute the script at our end, or a link would be better!

blueRain
02-27-2009, 03:38 AM
problem solved!

replace this:




for(var i=3; 7>=i; i++){
var optionFt = document.createElement("option");
optionFt.name = "optionFt";
optionFt.value = i;
optionFt.text = i + "'";
select.appendChild(optionFt);
}



by this:



for(var i=3; 7>=i; i++){
var optionFt = document.createElement("option");
optionValues = document.createTextNode(i);
optionFt.appendChild(optionValues);
select.appendChild(optionFt);
}


:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum