JavaScript - Getelementbyid Not Working With Adding Styles To Divs

Hello all,
I am trying to use document.getElementById in FF but its not working. There is a main page. in that mainpage there is a iframe and in that iframe (id = DocFrame) there is a textbox (id="fileuploadedcnt") which i am trying to access. there is no error. ofcourse i have given name and id to the textbox. Below is the code

function ConfirmCertificate(id , Project_ID , Subprogram_ID , ITCType_TI) {
frm=document.mainform;

//fileuploadedcnt = (document.frames("DocFrame").document.forms("upload_form").elements("fileuploadedcnt").value);
filecntobj = (document.getElementsByName("fileuploadedcnt"));
filecntobj = (document.getElementById("fileuploadedcnt"));

alert(fileuploadedcnt);
alert((filecntobj.value));
return;
if (fileuploadedcnt>0) {
result=confirm("Are you sure you want to confirm this certificate? ");
}

In the abpve case i tried both the name and id properties. with Name property i get the HTMLObj alert but again it fails if i attach value method. And for id, it doesnt work at all

No errors ofcourse in both the cases
What am i missing

Thanks

Hi ALL,

I am validating a three form field which takes temperature value between 0-50, humidity 1-100 & rainfall 0-200. I am able to see expected result for temperature value but not getting correct value for humidity & rainfall(still one can insert text in it..)

Here is my code-:
Code:

<script type="text/javascript">
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(obdate,"Date must be filled out!")==false)
{
obdate.focus();return false;}
}

is_leaf_fresh = -1;	 
for (i=0;i < thisform.is_leaf_fresh.length;  i++)
{	
if (thisform.is_leaf_fresh[i].checked == true) 
{
//alert("coming into "+thisform.is_leaf_fresh[i].checked);
is_leaf_fresh = 1;
}
} 
if ((is_leaf_fresh == -1)) 
{
alert("You must select an option for Fresh Leaf!");
return false;
}

var temp_max;
temp_max = document.getElementById("temperature_max").value;
if (temp_max != '' )
{
var numericExpression = /^[0-9]+$/;
	if(temp_max.match(numericExpression) && (temp_max>=0 && temp_max<=50)){
	return true;
	}
	else{
		alert("Max Temperature value should be Numeric & between 0 to 50");
		document.getElementById("temperature_max").focus();
		return false;
	}
} 

var temp_min;
temp_min = document.getElementById("temperature_min").value;
if (temp_min != '' )
{
var numericExpression = /^[0-9]+$/;
	if(temp_min.match(numericExpression) && (temp_min>=0 && temp_min<=50)){
	return true;
	}
	else{
		alert("Min Temperature value should be Numeric & between 0 to 50!");
		document.getElementById("temperature_min").focus();
		return false;
	}
} 

var rainfall_mm;
rainfall_mm = document.getElementById("rainfall_mm").value;
if (rainfall_mm != '' )
{
var numericExpression = /^[0-9]+$/;
	if(rainfall_mm.match(numericExpression) && (rainfall_mm>=20 && rainfall_mm<=50)){
	return true;
	}
	else{
		alert("Min Temperature value should be Numeric & between 20 to 50!");
		document.getElementById("rainfall_mm").focus();
		return false;
	}
} 

var humidity_mm;
humidity_mm = document.getElementById("humidity_mm").value;
if (humidity_mm != '' )
{
var numericExpression = /^[0-9]+$/;
	if(humidity_mm.match(numericExpression) && (humidity_mm>=20 && humidity_mm<=50)){
	return true;
	}
	else{
		alert("Min Temperature value should be Numeric & between 20 to 50!");
		document.getElementById("humidity_mm").focus();
		return false;
	}
} 
}
</script>

Thanks in Advance!!

This code works fine in IE but it won't in FF.

The error console says topdiv.style and sidediv.style are 'undefined'

This is the javascript:

Code:

function changeposition() {

topdiv = "document.getElementById('top')";
sidediv = "document.getElementById('side')";

if (document.scrolltop > 100) {
topdiv.style.position = "fixed";
topdiv.style.top = "-100px";

sidediv.style.position = "fixed";
sidediv.style.position = "35px";

} else {
topdiv.style.position = "absolute";
topdiv.style.top = "0px";

sidediv.style.position = "absolute";
sidediv.style.position = "135px";

}}


window.onscroll = changeposition();

and the HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<link rel="stylesheet" type="text/css" href="standardstyle.css">

<script type="text/javascript" src="menuposition.js"></script>

</head>

<body>

<div class="top" id="top">
...
</div>

<div class="sidebar" id="side">
...
</div>

...

</body>
</html>

I'm using FF4

I'm working on my own site for layouts for sites like Myspace and Ning.
Myspace changed their layouts to no longer include CSS so I am working on a new way to post their layouts.

I used this same method to post all our other layouts.
For some reason this is not showing up in IE.

Firefox:


IE:


Interestingly enough, when I run the debugger in IE it loads when it is done.
If not I get the black hole effect above.

ERRORS:
Object required
Not implemented

Any help will be greatly appreciated!

Code:

bgImg = document.getElementById('bg').innerHTML;
tile = document.getElementById('bgtile').innerHTML;
att = document.getElementById('bgatt').innerHTML;
pos = document.getElementById('bgpos').innerHTML;
top = document.getElementById('mar').innerHTML;
ht = document.getElementById('marht').innerHTML;
alink = document.getElementById('sel').innerHTML;
col = document.getElementById('bgcol').innerHTML;
hed = document.getElementById('hdr').innerHTML;
bord = document.getElementById('bdr').innerHTML;
con = document.getElementById('ct').innerHTML;
div3 = document.getElementById('MS3css').innerHTML;


if (document.getElementById('bg')){
document.getElementById('bgimgEmpty').innerHTML='Background Image: <br /><textarea id="MS3" style="width:250px; height: 55px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" ><img src="'+bgImg+'"></textarea><br />';}
if (document.getElementById('bgtile')){
document.getElementById('bgtileEmpty').innerHTML='Background Tile: <br /><textarea id="MS3" style="width:250px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+tile+'</textarea><br />';}
if (document.getElementById('bgatt')){
document.getElementById('bgattEmpty').innerHTML='Background Attachment: <br /><textarea id="MS3" style="width:250px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+att+'</textarea><br />';}
if (document.getElementById('bgpos')){
document.getElementById('bgposEmpty').innerHTML='Background Position: <br /><textarea id="MS3" style="width: 250px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+pos+'</textarea><br />';}
if (document.getElementById('mar')){
document.getElementById('marEmpty').innerHTML='Marquee: <br /><textarea id="MS3" style="width:250px; height: 55px; background: #999999; color: #000000; padding: 2px;"><a href="http://skemaholicsanonymous.com/"><img src="'+top+'"></a></textarea><br />';}
if (document.getElementById('marht')){
document.getElementById('marhtEmpty').innerHTML='Marquee Height: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+ht+'</textarea><br />';}
if (document.getElementById('sel')){
document.getElementById('selEmpty').innerHTML='Selected: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+alink+'</textarea><br />';}
if (document.getElementById('bgcol')){
document.getElementById('bgcolEmpty').innerHTML='Background Color: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+col+'</textarea><br />';}
if (document.getElementById('hdr')){
document.getElementById('hdrEmpty').innerHTML='Header: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+hed+'</textarea><br />';}
if (document.getElementById('bdr')){
document.getElementById('bdrEmpty').innerHTML='Borders: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+bord+'</textarea><br />';}
if (document.getElementById('ct')){
document.getElementById('ctEmpty').innerHTML='Content: <br /><textarea id="MS3" style="width:60px; height: 25px; background: #999999; color: #000000; padding: 2px;"  onclick="select()" >'+con+'</textarea><br />';}

if (document.getElementById('MS3css')){
document.getElementById('code2Empty').innerHTML='<form id="genDone"action="http://blog.skemaholicsanonymous.com/MSPreview3/preview.php" method="post" rel="nofollow" target="_blank"><textarea id="codebox"  style="display: none;" name="genCode">'+div3+'</textarea><br /><input type="submit" value="Preview" id="prevLoad" /></form>';}

I'm a newbie, so it may be obvious. But can someone help me here? I want to display images based on times

Code:

<script type="text/javascript">
/*<![[CDATA */

var time = new Date();
var dayNight = time.getHours(); // gets the time of the day in hours

function displayImage() {

if (dayNight  >= 9 && dayNight <= 14) { 

document.getElementById("highlights").src="http://www.kacvtv.org/rotatorpics/amergrad.jpg";

}

if (dayNight  >= 14 && dayNight <= 17) { 

document.getElementById("highlights").src="http://www.kacvtv.org/rotatorpics/video-contest.jpg";

}

if (dayNight  >= 17 && dayNight <= 22 ) { 

document.getElementById("highlights").src="http://www.kacvtv.org/rotatorpics/vine.jpg";

}

else {
		 document.getElementById("highlights").src"http://www.kacvtv.org/rotatorpics/amergrad.jpg";
}
}
/*]]>*/ 
</script>

Then the code in the body
Code:

<body onload="displayImage">
<div id="highlights">
</div>

Here's a link.
http://tinyurl.com/7bzkdk7

I have a form where I want certain fields to be visible only if the user clicks a checkbox on the form.

Specifically, when Presented_to_Goverment_EntityCheckbox0 is checked, these fields should appear.

Code:

DropDownList ID="GovEntity"
	Officials_Last_NameTextBox0
	Officials_First_NameTextBox0
	Officials_TitleTextBox0

I created two different styles, show below; one makes the fields visible and one hides them
Code:

	<style type="text/css">
	.hideit {
	visibility: hidden;
	overflow: hidden;
	position: absolute;
	}
	.showit {
	visibility: visible;
	overflow: visible;
	position: static;
}


	</style>

Then I surrounded the fields with a div ID'ed as wdiv

Code:

<div class="hideit" id="wdiv">
                                        Type Government Entity:
                                        <asp:TextBox ID="Type_Government_EntityTextBox" 

runat="server" 
                                            Text='<%# Bind("Type_Government_Entity") %>' />
                                        <br />
                                        Officials Last Name:
                                        <asp:TextBox ID="Officials_Last_NameTextBox" 

runat="server" style="display:none"
                                            Text='<%# Bind("Officials_Last_Name") %>' />
                                        <br />
                                        Officials_First_Name:
                                        <asp:TextBox ID="Officials_First_NameTextBox" 

runat="server" 
                                            Text='<%# Bind("Officials_First_Name") %>' />
                                        <br />
                                        Officials_Title:
                                        <asp:TextBox ID="Officials_TitleTextBox" 

runat="server" 
                                            Text='<%# Bind("Officials_Title") %>' />
                                        <br />
                                        </div>

I am using the following javascript to change the styles in response to an onclick event.

Code:

<script language="javascript" type="text/javascript">
               

function changeDiv(wdiv) {	thediv = document.getElementById(wdiv);	

if(thediv.className == 'hideit'){		

thediv.className = 'showit';	} else if (thediv.className == 'showit'){		

thediv.className = 'showit';		}}
</script>

I call the Javascript in this line

Code:

 <asp:CheckBox ID="Presented_to_Goverment_EntityCheckBox" onClick="ChangeDiv(wdiv)" 

runat="server" />                                
                                        <br />

However nothing happens when I click the checkbox and if I look in Firefox's error console it says ChangeDiv is not defined. Thanks.

Hi guys, i m novice to javascript,
i have a piece of code to preview the image after selecting it from file upload control,its working fine in Firefox,but its not working in IE,Chorome,what is the error please let me know,here is my code.
function setImage(file)
{
if (document.all)
document.getElementById("<%=prevImage.ClientID %>").src = file.value;
else
document.getElementById("<%=prevImage.ClientID %>").src = file.files.item(0).getAsDataURL();
if (document.getElementById("<%=prevImage.ClientID %>").src.length > 0)
document.getElementById("<%=prevImage.ClientID %>").style.display = 'block';
}

Hi, I am trying to show and hide different div objects on a webpage all with different ID's as you can see. Only the first object will work "('killstreakwin')", or any that is put first, none of the others work after that. It's not the HTML side, it's definatly the javascript function. I've tried to use a loop but I don't know how to implement it into something like this. Any help would be appreciated.

This is the code I am using:-

function windowOpen() {
(document.getElementById('killstreakwin').style.visibility='visible');
(document.getElementById('standardwin').style.visibility='visible');
(document.getElementById('hardenedwin').style.visibility='visible');
(document.getElementById('veteranwin').style.visibility='visible');
(document.getElementById('prestigewin').style.visibility='visible');
(document.getElementById('perkswin').style.visibility='visible');
(document.getElementById('copycatwin').style.visibility='visible');
(document.getElementById('martyrdomwin').style.visibility='visible');
(document.getElementById('finalstandwin').style.visibility='visible');
(document.getElementById('painkillerwin').style.visibility='visible');
(document.getElementById('rankswin').style.visibility='visible');
(document.getElementById('prestigewin').style.visibility='visible');
(document.getElementById('primarywin').style.visibility='visible');
(document.getElementById('secondarywin').style.visibility='visible');
(document.getElementById('attachmentswin').style.visibility='visible');
}

function windowClose() {
(document.getElementById('killstreakwin').style.visibility='hidden');
(document.getElementById('standardwin').style.visibility='hidden');
(document.getElementById('hardenedwin').style.visibility='hidden');
(document.getElementById('veteranwin').style.visibility='hidden');
(document.getElementById('prestigewin').style.visibility='hidden');
(document.getElementById('perkswin').style.visibility='hidden');
(document.getElementById('copycatwin').style.visibility='hidden');
(document.getElementById('martyrdomwin').style.visibility='hidden');
(document.getElementById('finalstandwin').style.visibility='hidden');
(document.getElementById('painkillerwin').style.visibility='hidden');
(document.getElementById('rankswin').style.visibility='hidden');
(document.getElementById('prestigewin').style.visibility='hidden');
(document.getElementById('primarywin').style.visibility='hidden');
(document.getElementById('secondarywin').style.visibility='hidden');
(document.getElementById('attachmentswin').style.visibility='hidden');
}

Hi all, im trying to select certain elements from on screen and set the style of a div to over lap it.

Code:

$("body *").each(function(){
	if($(this).attr("rel")!="nbta"){
		alert("#div" + z + " style: " + "display:block; width:" + $(this).width() + "px; height:" + $(this).height() + "px; position:absolute; top:" + $(this).position().top + "px; left:" + $(this).position().left + "px; border: 1px solid red; z-index:" + $(this).parentNumber() + ";");
			
		$("#div" + z).attr("style", "display:block; width:" + $(this).width() + "; height:" + $(this).height() + "; position:absolute; top:" + $(this).position().top + "; left:" + $(this).position().left + "; border: 1px solid red; z-index:" + $(this).parentNumber() + ";"); 
		z++;
	}
});

Code:

<p id="fooBar">dfgdsfdsfdsf1111</p>
<p id="fooBar2">dfgdsfdssdsdfdsf222</p>
<p id="fooBar3">dfgdsfdsfdsf333</p>
<p id="fooBar4">dfgdsfdsfdsf444</p>

<div id="div1" style="display:none" rel="nbta">&nbsp;</div>
<div id="div2" style="display:none" rel="nbta">&nbsp;</div>
<div id="div3" style="display:none" rel="nbta">&nbsp;</div>
<div id="div4" style="display:none" rel="nbta">&nbsp;</div>

seems easy enough and the results are showing corrent i just cant seem to get it to display!

I have this bit of code,


Code:

<script type="text/javascript">
var myScore = 0;


function correct(val)
{
alert(val.value);
x=val.value;
myScore=myScore+x;
alert(myScore);
}

function disableButton(myButton)
{
document.getElementById(myButton.id).disabled = true;
}

</script>

So in another word, the function correct is triggers when a user select an answer. And value are assigned to the answer. In the inside the correct function, this value is added to the myScore.

But instead of adding, the value is contacted like a string.

If the value of the answer selected in 3, myScore generated 03 instead of 3. And then value of the next question is 2, I get 032 instead of 5.

How can force val.value to be integer or real number. I even tried parseInt function and it didn't work.


Rohn

I would like onclick to only work from div id="telli", but instead it works on all the divs.. I've tried a lot of different things, nothing has worked so maybe somebody can help me. I would like the div telli to open up a popup layer onclick. Please help me.. I am a newbie to Javascript

HTML sheet:
<body>

<div id="main">
<div id="header">
<div id="content">
<div id="sidebar">
<div id="telli</div>
<div id="footer">

</div>
</div>
</div>
</div>
</div>


</body>


CSS sheet:
html {
background: url(back.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}

#main {
background-image:url(ground.png);
position:absolute;
margin-left:auto;
margin-right:auto;
width:1300px;
height:1200px;

}

#header {
background-image:url(header.png);
position:absolute;
width:1300px;
height:1200px;
}

#content {
background-image:url(content.png);
position:absolute;
width:1300px;
height:1200px;
}

#telli {
background-image:url(telli.png);
position:absolute;
width:1300px;
height:1200px;
}

#sidebar {
background-image:url(sidebar.png);
position:absolute;
width:1300px;
height:1200px;
}

#footer {
background-image:url(footer.png);
position:absolute;
width:1300px;
height:1200px;
}

So, I'm using a lot of js and I needed to find a work around to get it all working together, so I'm using InsertContent and RemoveContent to control several divs that I have. In this case it is 4 divs, but in other situations I'll have up to 10.

My problem is that when the user starts with the first div displayed, the other 3 swap just fine, however, when clicking through the set of links, once the user gets to the 3rd link that is supposed to swap out the divs all the divs show up except the first, and the same happens on the fourth link.

This is my js for the div swap functionality:
Code:

<script type="text/javascript">
<!--
function InsertContent(tid) {
if(document.getElementById(tid).style.display == "none") {
	document.getElementById(tid).style.display = "";
	}
else {
	document.getElementById(tid).style.display = "none";
	}
}

function RemoveContent(tid) {
if(document.getElementById(tid).style.display == "") {
	document.getElementById(tid).style.display = "none";
	}
	
else {
	document.getElementById(tid).style.display = "";
	}
}

//-->
</script>

These are the html links:
Code:

 <div class="listimg"><a href="javascript:RemoveContent('view2','view3','view4'); InsertContent('view1'); swapimg(0);  " ><img src="../assets/images/nokia/nokia01_thumb.jpg" id="item0" alt="" style="opacity:.99;" /></a></div>
    
     <div class="listimg"><a href="javascript:RemoveContent('view1','view3','view4');  InsertContent('view2'); swapimg(1); "><img src="../assets/images/nokia/nokia02_thumb.jpg" id="item1" alt="" /></a></div>
      
     <div class="listimg"><a href="javascript:RemoveContent('view1','view2','view4'); InsertContent('view3'); swapimg(2);"><img src="../assets/images/nokia/nokia03_thumb.jpg" id="item2" alt=""/></a></div>
     
     <div class="listimg"><a href="javascript:RemoveContent('view1','view2','view3'); InsertContent('view4'); swapimg(3);"><img src="../assets/images/nokia/nokia04_thumb.jpg" id="item3" alt=""/></a></div>

And these are the divs that are being removed and added:
Code:

<div id="view1" style="display: "  > 
<a href="../assets/images/nokia/nokia01_big.jpg" class="thickbox" title="Windowcling" rel="gallery-art" >view larger1</a> 
</div>
<div id="view2" style="display:none"  > 
<a href="../assets/images/nokia/nokia02_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art2" >view larger2</a>
</div>
<div id="view3" style="display:none" > 
<a href="../assets/images/nokia/nokia03_big.jpg" class="thickbox" title="Windowcling3" rel="gallery-art3" >view larger3</a>   
</div>
<div id="view4" style="display:none" > 
<a href="../assets/images/nokia/nokia04_big.jpg" class="thickbox" title="Windowcling2" rel="gallery-art4" >view larger4</a> 
</div>

Any help would be greatly appreciated. Thank you in advance!

Hi All,

I have a javascript function which adds a label and value to a select widget in its parent window. The function is working fine in firefox and chrome without any errors or warnings. But it is not working in internet explorer. Please tell me what the issue is. Thanks in advance for your help.

Code:

function addToParent( formName, selectName, name, label ) {

    var parent       = window.opener;
    var selectWidget = parent.document.forms[formName].elements[selectName];

    if( selectWidget ) {

        var length = selectWidget.length;
        selectWidget[length] = new Option( name, label, false, false );
    }
}

When I tried to debug, internet explorer shows an error in the following line

Code:

selectWidget[length] = new Option( name, label, false, false );

Is there anything wrong with this statement ??

I'm building a t-shirt shop whose interface includes a gallery of designs in an IFrame. When the user clicks on a design, a dedicated page is loaded into the IFrame which shows all the available products associated with the design the user clicked.

I've put each design's image and associated page as the first and second elements of a nested array, and am using a for loop to then load all the images into the page that's shown in the IFrame when the web-site loads. It's looking beautiful, but here's the rub I've been stuck on for two days now with no solution in sight...

The array, "designImages", has 37 elements (ie. designImages[0]... designImages[36]). When I click on a design image on the page, any design image, the browser (all browsers, so I can't blame Microsoft for this one ), loads the page for design #36. I've tried all sorts of things, but still cannot tell if the issue is because the dynamically generated divs are being reassigned the value [36] after the for loop's executed, or if the div id's are okay but somehow the code is rooting for [36], the last element of the array anyway.

I need someone's help in enabling a click on #4 to load the page for #4, etc, etc. Here's the code below.

Thanks.

Code:

/* designImages[x][0] = the image source on the page;
 * designImages[x][1] = the destination url on clicking the image;
*/

		var designImages = new Array();
		designImages[0] = new Array ( "Assets/DesignImages/Img00 - CosmicCircle.png" , "ProductGalleries/Img00.html" , "Cosmic Circles" , "Mark Lavin");
		designImages[1] = new Array ( "Assets/DesignImages/Img01 - Flora.png" , "ProductGalleries/Img01.html" );
		designImages[2] = new Array ( "Assets/DesignImages/Img02 - JBuddha.png" , "ProductGalleries/Img02.html" );
		designImages[3] = new Array ( "Assets/DesignImages/Img03 - Ohm+Sun.png" , "ProductGalleries/Img03.html" );
		designImages[4] = new Array ( "Assets/DesignImages/Img04 - Ohm+Burst.png" , "ProductGalleries/Img04.html" );
		designImages[5] = new Array ( "Assets/DesignImages/Img05 - Space+Invader.png" , "ProductGalleries/Img05.html" );

		designImages[6] = new Array ( "Assets/DesignImages/Img06 - Fire.png" , "ProductGalleries/Img06.html" );
		designImages[7] = new Array ( "Assets/DesignImages/Img07 - Live.png" , "ProductGalleries/Img07.html" );
		designImages[8] = new Array ( "Assets/DesignImages/Img08 - Being.png" , "ProductGalleries/Img08.html" );
		designImages[9] = new Array ( "Assets/DesignImages/Img09 - Water.png" , "ProductGalleries/Img09.html" );
		designImages[10] = new Array ( "Assets/DesignImages/Img10 - Abundance.png" , "ProductGalleries/Img10.html" );
		designImages[11] = new Array ( "Assets/DesignImages/Img11 - Adventure.png" , "ProductGalleries/Img11.html" );

		designImages[12] = new Array ( "Assets/DesignImages/Img12 - Air.png" , "ProductGalleries/Img12.html" );
		designImages[13] = new Array ( "Assets/DesignImages/Img13 - Chance.png" , "ProductGalleries/Img13.html" );
		designImages[14] = new Array ( "Assets/DesignImages/Img14 - Dangerous.png" , "ProductGalleries/Img14.html" );
		designImages[15] = new Array ( "Assets/DesignImages/Img15 - Destiny.png" , "ProductGalleries/Img15.html" );
		designImages[16] = new Array ( "Assets/DesignImages/Img16 - Dream.png" , "ProductGalleries/Img16.html" );
		designImages[17] = new Array ( "Assets/DesignImages/Img17 - Earth.png" , "ProductGalleries/Img17.html" );

		designImages[18] = new Array ( "Assets/DesignImages/Img18 - Ecstasy.png" , "ProductGalleries/Img18.html" );
		designImages[19] = new Array ( "Assets/DesignImages/Img19 - Freedom.png" , "ProductGalleries/Img19.html" );
		designImages[20] = new Array ( "Assets/DesignImages/Img20 - Friendship.png" , "ProductGalleries/Img20.html" );
		designImages[21] = new Array ( "Assets/DesignImages/Img21 - Fulfillment.png" , "ProductGalleries/Img21.html" );
		designImages[22] = new Array ( "Assets/DesignImages/Img22 - Generosity.png" , "ProductGalleries/Img22.html" );
		designImages[23] = new Array ( "Assets/DesignImages/Img23 - Gift.png" , "ProductGalleries/Img23.html" );

		designImages[24] = new Array ( "Assets/DesignImages/Img24 - Imagine.png" , "ProductGalleries/Img24.html" );
		designImages[25] = new Array ( "Assets/DesignImages/Img25 - Joy.png" , "ProductGalleries/Img25.html" );
		designImages[26] = new Array ( "Assets/DesignImages/Img26 - Kinky.png" , "ProductGalleries/Img26.html" );
		designImages[27] = new Array ( "Assets/DesignImages/Img27 - Mystery.png" , "ProductGalleries/Img27.html" );
		designImages[28] = new Array ( "Assets/DesignImages/Img28 - Mastery.png" , "ProductGalleries/Img28.html" );
		designImages[29] = new Array ( "Assets/DesignImages/Img29 - Peace.png" , "ProductGalleries/Img29.html" );

		designImages[30] = new Array ( "Assets/DesignImages/Img30 - Sexy.png" , "ProductGalleries/Img30.html" );
		designImages[31] = new Array ( "Assets/DesignImages/Img31 - iBurn.png" , "ProductGalleries/Img31.html" );
		designImages[32] = new Array ( "Assets/DesignImages/Img32 - PlayaTrash.png" , "ProductGalleries/Img32.html" );
		designImages[33] = new Array ( "Assets/DesignImages/Img33 - Ohm+Burst.png" , "ProductGalleries/Img33.html" );
		designImages[34] = new Array ( "Assets/DesignImages/Img34 - BlackRockCity.png" , "ProductGalleries/Img34.html" );
		designImages[35] = new Array ( "Assets/DesignImages/Img35 - BarCode.png" , "ProductGalleries/Img35.html" );

		designImages[36] = new Array ( "Assets/DesignImages/Img36 - NumberedBarCode.png" , "ProductGalleries/Img36.html" );
		
window.onload = function() 
	{
		creationCompleteHandler();
	}

function creationCompleteHandler()
	{
		calcNumDesigns();
		setLinks();
	}

function calcNumDesigns()
	{
		var numDesignBoxes = designImages.length;
		var numGalleryRows = Math.ceil( numDesignBoxes / 3 );
		
		for ( n = 0 ; n <= numGalleryRows - 1 ; n++ )
			{
				var newGalleryBox = document.createElement('div');
				var newGalleryBoxID = ("galleryRow" + n);
				newGalleryBox.setAttribute('id',newGalleryBoxID);
				newGalleryBox.setAttribute('class',"galleryBox");
				document.getElementById('content').appendChild(newGalleryBox);
				
				squareOff(newGalleryBox);
				
				var rowBoxes;
				if  ( ( numDesignBoxes - ( n * 3 ) ) < 3 ) { rowBoxes = ( numDesignBoxes - ( n * 3 ) - 1 ) }
				else rowBoxes = 2;
				
				for ( m = 0 ; m <= rowBoxes ; m++ )
					{
						var boxNum = ( n * 3 ) + m;
						var newDesignBox = document.createElement('div');

						var newDesignBoxID = "design" + boxNum;
						newGalleryBox.appendChild(newDesignBox);
						newDesignBox.setAttribute('id',newDesignBoxID);
						newDesignBox.setAttribute('class',"designBox");

						var newDesignImg = document.createElement('img');
						var newDesignImgID = "designImg" + boxNum;
						newDesignImg.setAttribute('id',newDesignImgID);
						newDesignImg.setAttribute('class',"designImage");
						newDesignImg.src = designImages[boxNum][0]; 
						
						newDesignBox.appendChild(newDesignImg);
					}
			}
	}
	
function squareOff(frame)
	{
		document.getElementById(frame.id).style.height = ((document.getElementById(frame.id).offsetWidth) * .33) + 'px';
	}
	
function setLinks()
	{
		for (x in designImages)
			{ document.getElementById("design"+x).onclick = function(){ sendToURL(x) }
			};
	}

function sendToURL(x)
	{
		var url = designImages[x][1]
		MM_goToURL('self',url);
		return document.MM_returnValue;
	}
	
function MM_goToURL() 
	{ //v3.0
 		 var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
 		 for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
	}

Hello smart people... perhaps someone can figure this one out. I hope it's not a PHP question.

I have a form and need to populate FIELD2 with the result of FIELD1.

Field one is a dynamic list from a database, where the value is an ID#, but the list shows the name.

I want to populat FIELD2 with the name that is chosen, not the id (I can't get anything to work)

Here is the code from the 2 fields:
FIELD 1:
Code:

<select name = "" realname = "{#role#}" required="1" exclude = "-1" id = "roleselect">
<option value="-1" selected="selected">Choose</option>
<option value = "{$roles[role].ID}" id="role{$roles[role].ID}">{$roles[role].name}</option>

FIELD 2:
Code:

<input type="hidden" name="rolename" id="rolename" required="0" realname="rolename" />

Here is the javascript I tried to populate field 2 with the selected option of field 2:
Code:

function updaterole(){
        document.getElementById("rolename").value =document.getElementById("role").value;

I tried using name instead of value for field 1, but that didn't work either. The db just shows empty.

thanks for any help!