[JavaScript] innerHTML and quotes...

[Jecht]

Picture this:

[...]
<div id="container">Ooops...! Looks like your browser doesn't support JavaScript</div>
[...]
<div id="navigator">
   <div id="nav_login" onclick="navLinkClick(this)">Login</div>
   <div id="nav_lostpw" onclick="navLinkClick(this)">Lost PW</div>
   <div id="nav_register" onclick="navLinkClick(this)">Register</div>
</div>
[...]
<div id="hiddenForms"> /* visibility:hidden; */
   <div id="login"><form name="login" ...>[...]</form></div>
   <div id="lostpw"><form name="lostpw" ...>[...]</form></div>
   <div id="register"><form name="register" ...>[...]</form></div>
</div>

The function navLinkClick(tgt) change the clicked button bg and load the HTML into div#container:

	function navLinkClick(tgt){
		var navLink=getByID('navigator').getElementsByTagName('div');
		var navLinkDiv=tgt.id.replace('nav_','');
		for(i=0;i<navLink.length;i++){
			if(navLink[i].className=='navButton'){
				if(navLink[i]==tgt){
					navLinkBuffer='bottom';
					tgt.style.backgroundPosition='bottom';
				}else{
					navLink[i].style.backgroundPosition='top';
					if(getByID(navLink[i].id.replace('nav_','')).innerHTML==''){
						getByID(navLink[i].id.replace('nav_','')).innerHTML=getByID('container').innerHTML.replace(/"/g,'&quot;');
					}
				}
			}
		}
		if(getByID(navLinkDiv).innerHTML!=''){
				getByID('container').innerHTML=getByID(navLinkDiv).innerHTML.replace(/"/g,'&quot;');
				getByID(navLinkDiv).innerHTML='';
		}
		return;
	}

On page load navLinkClick(getByID('nav_login')) is performed (the getByID function is my version of getElementByID, working with any browser)
Everything works fine in IE, Firefox, Safari, mobile Safari (iPhone), but not on Opera for Wii (the Nintendo console)... The script works if the content to load is plain text, so i'm sure the issue is all about quotes...

i tried to replace with ' (single quotes), \\", \", " without success...

\\" and " load something but misformatted (for instance, in text inputs you see \\" or "" respectively, probably due to value=\\"\\" or value="" and the input fields are one-under-another instead of side-by-side)

replacing < and > with &lt; and &gt; transform the content into plain text, and it is loaded into div#container as plain text, not html elements... useless!

I need your help!

 

[Jecht]

omg, I have no idea about what's going on...
I added the final alert to see how the div#content innerHTML changed its content:

	function navLinkClick(tgt,mode){
		var navLink=getByID('navigator').getElementsByTagName('div');
		var navLinkDiv=tgt.id.replace('nav_','');
		for(i=0;i<navLink.length;i++){
			if(navLink[i].className=='navButton'){
				if(navLink[i]==tgt){
					navLinkBuffer='bottom';
					tgt.style.backgroundPosition='bottom';
				}else{
					navLink[i].style.backgroundPosition='top';
					if((mode.toLowerCase()=='showdiv')&&(getByID(navLink[i].id.replace('nav_','')).innerHTML=='')){
						getByID(navLink[i].id.replace('nav_','')).innerHTML=getByID('container').innerHTML.replace(/"/g,"'");
					}
				}
			}
		}
		if((mode.toLowerCase()=='showdiv')&&(getByID(navLinkDiv).innerHTML!='')){
				getByID('container').innerHTML=getByID(navLinkDiv).innerHTML.replace(/"/g,"'");
				getByID(navLinkDiv).innerHTML='';
				alert(getByID('container').innerHTML);
		}
		return;
	}

The result is quite odd:

<FORM name="login" method="POST" action="index.php"></FORM>

<FORM name="lostpw" method="POST" action="_kernel/lostpw.php"></FORM>

<FORM name="register" method="POST" action="_kernel/register.php"></FORM>

Now, where the hell are all the inputs gone?? Remember: this behavior regards just Opera (on Wii console), works perfect on computers (IE,FF and Safari) and on Iphones (mobile safari)

Additional information: I write here the DIVs

		<div class="hiddenForm">
			<div id="ooops"></div>
			<div id="login">
				<form name="login" method="POST" action="index.php">
					<div style="width:25%; float:left; text-align:center; font-size:7pt;"><label for="mail">..:: MAIL ::..</label><br />
						<input name="mail" type="text" value="" style="width:90%;" /></div>
					<div style="width:25%; float:left; text-align:center; font-size:7pt;"><label for="pass">..:: PASSWORD ::..</label><br />
						<input name="pass" type="password" value="" style="width:90%;" /></div>
					<div style="width:25%; float:left; text-align:center; font-size:7pt;"><label for="gui">..:: GUI ::..</label><br />
						<?php print($iGUI); ?></div>
					<div style="width:25%; float:left; text-align:center;"><input name="submit" type="submit" value="Login" style="width:90%;" /><br /><input name="submit" type="submit" value="Guest" style="width:90%;" /></div>
				</form>
			</div>
			<div id="lostpw">
				<form name="lostpw" method="POST" action="_kernel/lostpw.php">
					<div style="width:75%; float:left; text-align:center; font-size:7pt;"><input name="mail" type="text" value="" style="width:90%;" /><br />
						<label for="mail">Insert your email address (the same used to sign up) to start</label></div>
					<div style="width:25%; float:left; text-align:center;"><input name="submit" type="submit" value="Send" style="width:90%;" /></div>
				</form>
			</div>
			<div id="register">
				<form name="register" method="POST" action="_kernel/register.php">
					<input name="accept" type="hidden" value="yes" />
					<div style="width:75%; float:left; font-size:7pt;">In order to sign up you should have at least 18 years old. If you are younger, you need your parent's approvation.</div>
					<div style="width:25%; float:left; text-align:center;"><input name="submit" type="submit" value="Accept" style="width:90%;" /><br /><input name="cancel" type="button" value="Cancel" style="width:90%;" onclick="navLinkClick(getByID('nav_login'),'showdiv');" /></div>
				</form>
			</div>
		</div>