Member Avatar for kenny.tor

Dear all,
First time posting. I have a piece of javascript like the following. What it does is when you click on the text 'Click me', it will prompt you for password; if you enter 'test', it will show the url 'picasa' in a div. The code works in FF3 perfectly but it just won't show the url in IE7. Please shed me some light.

<html>
<head>
  <SCRIPT LANGUAGE="JavaScript">

 
var URL = "http://picasaweb.google.ca/";
var form = "<form name=\"gform\"" + "method=\"post\">" +
           "Password: <input type=\"password\" name=\"gpassword\" id=\"gp\"/>" +
          "<input type=\"submit\"   onclick=\"validate()\" value=\"submit\" />" +
          "</form>";

var pass = "test";

function setFocus()
{
document.getElementById("gp").focus();
}

function showURL()
{
  document.getElementById('GalleryDiv').innerHTML = "<a href=\"" + URL + ">" + "LINK" + "</a>";
}

function showForm()
{
  document.getElementById('targetDiv').innerHTML = form;
} 

function validate()
{
if(document.getElementById("gp").value==pass)
  {
   showForm();
   showURL();
  }
   
} //end validate()
  </SCRIPT>
</head>

<body onload="setFocus()">


<h1 onclick="showForm();setFocus();">Click me</h1>

<div id="targetDiv">
</div>

<div id="GalleryDiv">
</div>

</body>
</html>
  • 2 Contributors
  • 5 Replies
  • 128 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by essential

Recommended Answers

All 5 Replies

Member Avatar for essential

Same issue with Firefox vs IE thread. Have you checked it out?

Member Avatar for kenny.tor

I did. But I didn't quite get it.

Same issue with Firefox vs IE thread. Have you checked it out?

Member Avatar for essential

Ok, here's your code. It's been configured according to your provided (x)HTML document and all unnecessary function's has also been removed. I still maintained some of your lines so you won't loose track when you perform editing in the script.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>CROSS-PLATFORM</title>
<script type="text/javascript">
// <![CDATA[
var url, form, pass, loc;
var showURL, showForm, validate;

   url = "http://picasaweb.google.ca/";
pass = "test";

showURL = function() {
   loc = '\n<a href="' + url + '">LINK</a>\n';
   (( document.getElementById ) ? document.getElementById('GalleryDiv').innerHTML = loc : document.all["GalleryDiv"].innerHTML = loc );
};

validate = function() { 
  txt = (( document.getElementById ) ? document.getElementById("gp") : document.all["gp"] );
   if ( txt.value === pass ) { 
   showURL(); return false;
   } alert("Invalid Password!"); 
return false;
};

showForm = function() {
   form = '\n<form action="#" id="gform" method="post" onsubmit="return validate();">\n';
   form += 'Password : <input type="password" name="gp" id="gp" value="" size="20" />\n';
   form += '<input type="submit" value="submit" />';
   form += "</form>";
   (( document.getElementById ) ? document.getElementById('targetDiv').innerHTML = 
form : document.all.targetDiv.innerHTML = form );
    (( document.getElementById ) ? document.getElementById("gp").focus() : document.all["gp"].focus() );
};

// ]]>
</script>
</head>
<body>
<h1 onclick="showForm();">Click me!</h1>
<div id="targetDiv"></div>
<div id="GalleryDiv"></div>
</body>
</html>

Hope you find it useful...

Member Avatar for kenny.tor

Thanks so much Essential. Frankly I did not fully understand why yours works beautifully while mine just won't get along with IE. Anyhow, I am still wondering what magic this line of code does (( document.getElementById ) ? document.getElementById("gp") : document.all["gp"] ); Afterall, I am still green on JavaScript.

Member Avatar for essential

It's a shorthand statement of:

if ( condition ) { 
   return true;
} else { 
   return false;
}

shorthand statement syntax:

(( [b]condition[/b] ) ? condition is true : false condition );

NOTE This will only work on a single line statement -- if you have more lines', then simply do the whole thing with the if ( ) { } else { } block.

Hope it goes wel with you...


essential

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.