0

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
6
Views
7 Years
Discussion Span
Last Post by essential
0

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

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

0

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...

0

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.

0

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

This article has been dead for over six months. Start a new discussion instead.
Be sure to adhere to our posting rules.