PDA

View Full Version : if else function in internet explorer - not working.



kimberlyhello
09-22-2007, 10:58 PM
I have a problem that I can't seem to resolve by myself. Hopefully someone can help.

I have a text field that when someone enters a keyword, the window goes to a different website depending on what is entered into the field.

Here is my function called iframe. I call it like this: <body onLoad="iframe()">


It works great in Firefox, but doesn't work in internet explorer.

I am sure there is an easy solution, I just doesn't know what it is. Is there something about explorer that I don't know about preventing this code from working?

Ive tried using window.location instead of document.location and that doesn't work either.

Thanks to anyone that can help me out!



function iframe() {
if(document.forms["keyword"].txt1.value.toLowerCase() == ""){
}

else if(document.forms["keyword"].txt1.value.toLowerCase() == "yahoo"){
document.location='http://www.yahoo.com';}

else if(document.forms["keyword"].txt1.value.toLowerCase() == "google"){
document.location = 'http://www.google.com';}

else document.location='http://www.csun.edu';}

Trinithis
09-22-2007, 11:09 PM
It's window.location.href

kimberlyhello
09-23-2007, 12:08 AM
doesn't work :(

However, it still works in Firefox.

jscheuer1
09-23-2007, 12:19 AM
Just off the top of my head -

Why in the world would you name a function after an element?

kimberlyhello
09-23-2007, 12:29 AM
It didn't even cross my mind that it could be a problem.

Do you think that could be causing the function not to work???

thetestingsite
09-23-2007, 12:32 AM
It is very possible. Your best bet would be to rename the function. As for the code, there shouldn't be anything wrong with it (just looking over it briefly).

Hope this helps.

Trinithis
09-23-2007, 12:47 AM
This code works in both IE and FF

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
</head>

<body>
<div>

<input type="text" id="txt1" />
<input type="button" id="btn1" value="Go" />

<script type="text/javascript">

function changeLocation(e) {
var val = document.getElementById("txt1").value.toLowerCase().replace(/^\s+/, "").replace(/\s+$/, "");
if(val.indexOf("http://")==0) {
window.location.href = val;
return;
}
if(val.indexOf("www.")==0) {
window.location.href = "http://" + val;
return;
}
switch(val) {
case "":
return;
case "google":
window.location.href = "http://www.google.com";
return;
case "yahoo":
window.location.href = "http://www.yahoo.com";
return;
default:
window.location.href = "http://www.csun.edu";
}
}

var btn = document.getElementById("btn1");

btn.addEventListener? btn.addEventListener("click", changeLocation, false): btn.attachEvent("onclick", changeLocation);

</script>
</div>
</body>
</html>

kimberlyhello
09-23-2007, 01:38 AM
I changed the function name, but it still doesn't work in explorer.

I'm thinking it has something to do with the body onload event

Here is my entire page, with the javascript function called textfield in the external js file (keywords.js).

<html>
<head>
<title></title>
<script type="text/javascript" src="keywords.js"></script>

</head>


<body onLoad="textfield();dropdown()">

<form action="/frame.html" onClick="rememberinput('txt1')" method="get" name="keyword" id="keyword">
<p align="center"><Br>
<input name="txt1" id="txt1" type="text" size="30" class="memorize">
<input type="button" value="Verify" onClick="textfield();">
<input name="t2" type="" value="" size="1" style="visibility:hidden";>
</p>
</form>
</p>
<p></p>
</body>
</html>


and here is the function in keywords.js

function textfield() {
if(document.forms["keyword"].txt1.value.toLowerCase() == ""){
}

else if(document.forms["keyword"].txt1.value.toLowerCase() == "yahoo"){
window.location.href='http://www.yahoo.com';}

else if(document.forms["keyword"].txt1.value.toLowerCase() == "google"){
window.location.href = 'http://www.google.com';}

else window.location.href='http://www.csun.edu';}

jscheuer1
09-23-2007, 05:31 AM
It looks as though Trinithis has taken the time to come up with tested code:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
</head>

<body>
<div>

<input type="text" id="txt1" />
<input type="button" id="btn1" value="Go" />

<script type="text/javascript">

function changeLocation(e) {
var val = document.getElementById("txt1").value.toLowerCase().replace(/^\s+/, "").replace(/\s+$/, "");
if(val.indexOf("http://")==0) {
window.location.href = val;
return;
}
if(val.indexOf("www.")==0) {
window.location.href = "http://" + val;
return;
}
switch(val) {
case "":
return;
case "google":
window.location.href = "http://www.google.com";
return;
case "yahoo":
window.location.href = "http://www.yahoo.com";
return;
default:
window.location.href = "http://www.csun.edu";
}
}

var btn = document.getElementById("btn1");

btn.addEventListener? btn.addEventListener("click", changeLocation, false): btn.attachEvent("onclick", changeLocation);

</script>
</div>
</body>
</html>

to apply to this situation, did you try it?

In any case, this looks really bad to me:



if(document.forms["keyword"].txt1.value.toLowerCase() == ""){
}

Once again, off the top of my head, if you are constructing a test:



if(document.forms["keyword"].txt1.value.toLowerCase() == ""

you should do something as a result. If nothing else, return:


if(document.forms["keyword"].txt1.value.toLowerCase() == ""){
return;
}

Still, I would recommend that you at least try the solution offered by Trinithis.


Your onload event looks fine, provided that the function:


dropdown();

exists and is error free.

kimberlyhello
09-23-2007, 07:14 PM
Thank you so much to everyone that is trying to help me.

I did try the code Trinithis provided, but it still doesn't work in Explorer. BTW, thank you Trinithis for taking your time to write that code for me. I was hoping it would work, but I'm still having the same problem.

I think it would be easier to show you the website I am talking about.

Go to http://www.googlegive.com

Type into the 2nd textfield box, "autism speaks" - then click verify. Now refresh the browser and see what happens.

If you are using firefox...a cookie is enable and the window is redirected to the appropriate place. It works perfectly in firefox.

If you are using explorer...the page is not redirected. However, the cookie seems to work because the textfield will still contain what you typed in-"autism speaks"

Please if you can, check it out in both browsers and you will see what I'm talking about.

I just need to fix it in Explorer.

I hope this explanation isn't too confusing. I've tried my best to fix it myself and have had no luck.

Thanks again!

Also, here is the javascript code contained in keywords.js



function googlegive() {
if(document.forms["keyword"].txt1.value.toLowerCase() == ""){
return;}

else if(document.forms["keyword"].txt1.value.toLowerCase() == "make a wish"){
window.location.href='http://www.googlegive.com/charity/makeawish.html';}

else if(document.forms["keyword"].txt1.value.toLowerCase() == "autism speaks"){
window.location.href='http://www.googlegive.com/charity/autismspeaks.html';}

else window.location.href='http://www.googlegive.com/charity/nocharity.html';}




var remembervalues_days=60
var dyncookiename="keyword"

var recallinput=function(){
var cookienamevalue=rememberinput.getCookie(dyncookiename).split("##")
for (var i=0; i<cookienamevalue.length; i++){
var cookiename=cookienamevalue[i].split("#")[0]
var cookievalue=cookienamevalue[i].split("#")[1]
if (document.getElementById(cookiename)!=null && document.getElementById(cookiename).type=="text")
document.getElementById(cookiename).value=decodeURI(cookievalue)
}
}

var rememberinput=function(){
var rememberit=""
for (var i=0; i<arguments.length; i++){
if (document.getElementById(arguments[i]).type=="text" && document.getElementById(arguments[i]).value!="")
rememberit+=arguments[i]+"#"+encodeURI(document.getElementById(arguments[i]).value)+"##"
}
rememberinput.setCookie(dyncookiename, rememberit, remembervalues_days)
}

rememberinput.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i");
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1]
return ""
}

rememberinput.setCookie=function(name, value, days){
var expireDate = new Date()

var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/;"
}

if (window.addEventListener)
window.addEventListener("load", recallinput, false)
else if (window.attachEvent)
window.attachEvent("onload", recallinput)
else if (document.getElementById)
window.onload=recallinput





function StateSuggestions() {
this.states = [
"a better chance", "accent On Success", "acres of hope", "aid for cancer research", "alameda creek alliance", "alaska assistance dogs","all charities", "autism speaks",
"breast cancer", "burts charity",
"cancer", "charity", "cure",
"Delaware", "Florida", "Georgia", "Hawaii",
"Idaho", "Illinois", "Indiana", "Iowa",
"Kansas", "Kentucky", "Louisiana",
"Maine", "Maryland", "Massachusetts", "Michigan", "Minnesota",
"Mississippi", "Missouri", "Montana",
"Nebraska", "Nevada", "New Hampshire", "New Mexico", "New York",
"North Carolina", "North Dakota", "Ohio", "Oklahoma", "Oregon",
"Pennsylvania", "Rhode Island",
"South Carolina", "South Dakota",
"Tennessee", "Texas", "Utah", "Vermont", "Virginia",
"Washington", "West Virginia", "Wisconsin", "Wy"
];
}


AutoSuggestControl.prototype.handleKeyDown = function (oEvent /*:Event*/) {

switch(oEvent.keyCode) {
case 38: //up arrow
this.previousSuggestion();
break;
case 40: //down arrow
this.nextSuggestion();
break;
case 13: //enter
this.hideSuggestions();
break;
}

};


AutoSuggestControl.prototype.handleKeyUp = function (oEvent /*:Event*/) {

var iKeyCode = oEvent.keyCode;


if (iKeyCode == 8 || iKeyCode == 46) {
this.provider.requestSuggestions(this, false);


} else if (iKeyCode < 32 || (iKeyCode >= 33 && iKeyCode < 46) || (iKeyCode >= 112 && iKeyCode <= 123)) {

} else {

this.provider.requestSuggestions(this, true);
}
};


AutoSuggestControl.prototype.hideSuggestions = function () {
this.layer.style.visibility = "hidden";
};


AutoSuggestControl.prototype.highlightSuggestion = function (oSuggestionNode) {

for (var i=0; i < this.layer.childNodes.length; i++) {
var oNode = this.layer.childNodes[i];
if (oNode == oSuggestionNode) {
oNode.className = "current"
} else if (oNode.className == "current") {
oNode.className = "";
}
}
};


AutoSuggestControl.prototype.init = function () {


var oThis = this;


this.textbox.onkeyup = function (oEvent) {


if (!oEvent) {
oEvent = window.event;
}


oThis.handleKeyUp(oEvent);
};


this.textbox.onkeydown = function (oEvent) {


if (!oEvent) {
oEvent = window.event;
}


oThis.handleKeyDown(oEvent);
};


this.textbox.onblur = function () {
oThis.hideSuggestions();
};


this.createDropDown();
};


AutoSuggestControl.prototype.nextSuggestion = function () {
var cSuggestionNodes = this.layer.childNodes;

if (cSuggestionNodes.length > 0 && this.cur < cSuggestionNodes.length-1) {
var oNode = cSuggestionNodes[++this.cur];
this.highlightSuggestion(oNode);
this.textbox.value = oNode.firstChild.nodeValue;
}
};


AutoSuggestControl.prototype.previousSuggestion = function () {
var cSuggestionNodes = this.layer.childNodes;

if (cSuggestionNodes.length > 0 && this.cur > 0) {
var oNode = cSuggestionNodes[--this.cur];
this.highlightSuggestion(oNode);
this.textbox.value = oNode.firstChild.nodeValue;
}
};


AutoSuggestControl.prototype.selectRange = function (iStart /*:int*/, iLength /*:int*/) {


if (this.textbox.createTextRange) {
var oRange = this.textbox.createTextRange();
oRange.moveStart("character", iStart);
oRange.moveEnd("character", iLength - this.textbox.value.length);
oRange.select();


} else if (this.textbox.setSelectionRange) {
this.textbox.setSelectionRange(iStart, iLength);
}


this.textbox.focus();
};


AutoSuggestControl.prototype.showSuggestions = function (aSuggestions /*:Array*/) {

var oDiv = null;
this.layer.innerHTML = "";

for (var i=0; i < aSuggestions.length; i++) {
oDiv = document.createElement("div");
oDiv.appendChild(document.createTextNode(aSuggestions[i]));
this.layer.appendChild(oDiv);
}

this.layer.style.left = this.getLeft() + "px";
this.layer.style.top = (this.getTop()+this.textbox.offsetHeight) + "px";
this.layer.style.visibility = "visible";

};


AutoSuggestControl.prototype.typeAhead = function (sSuggestion /*:String*/) {


if (this.textbox.createTextRange || this.textbox.setSelectionRange){
var iLen = this.textbox.value.length;
this.textbox.value = sSuggestion;
this.selectRange(iLen, sSuggestion.length);
}
};

jscheuer1
09-23-2007, 11:09 PM
All your script does is recall the value for the text input. The script appears to be working just fine in both browsers. What you are experiencing is simply the difference in iframe behavior between the two browsers. Opera acts just like IE in this case.

When you refresh a page containing an iframe in FF, if the page in the iframe has changed since the page was originally loaded, the new location of the iframe is automatically retained.

In IE and Opera, it reverts to the location listed in the iframe's src attribute.

What you would need to do is run the function googlegive() onload of and on the page in the iframe, and after the recallinput function has run.

Something like (untested due to the complex nature of the setup):


var recallinput=function(){
var cookienamevalue=rememberinput.getCookie(dyncookiename).split("##")
for (var i=0; i<cookienamevalue.length; i++){
var cookiename=cookienamevalue[i].split("#")[0]
var cookievalue=cookienamevalue[i].split("#")[1]
if (document.getElementById(cookiename)!=null && document.getElementById(cookiename).type=="text")
document.getElementById(cookiename).value=decodeURI(cookievalue)
}
googlegive();
}

kimberlyhello
09-26-2007, 03:14 AM
Thank you John...this has caused me trouble for a while and you were able to solve it.

I really appreciate your time.

I hope it's not too much trouble if I ask one more thing. Hopefully you or someone else will be able to help. Here is the website again: http://www.googlegive.com

It is working fine, but now the textfield shows up right before the iframe changes to the new window. If you type a charity into the textbox and then press verify. Then refresh, the textfield will show up for a split second with whatever you originally typed in. Finally, the window will change. Is there a way to change this?

I just don't want the textfield to show up before it changes to the new window.

I know this is only a minor detail, but if it has a solution, I would love to know.

Thanks,
Kim

jscheuer1
09-26-2007, 03:45 AM
That is a fairly easy concept, but you should be careful how it is executed. Thinking about this, you should also look into a non-javascript fall back, as the current set up doesn't appear to function without javascript enabled. However, as I say the concept is pretty simple. You can hide the form (in the head of the page - http://www.googlegive.com/frame.html):


document.write('<style type="text/css">form {visibility:hidden;}<\/style>');

But you will need to show it, if the page isn't going to be switched (addition red, I've cleaned up the function a little too):


function googlegive() {
if(document.forms["keyword"].txt1.value.toLowerCase() == ""){
document.forms[0].style.visibility='visible';
return;
}

else if(document.forms["keyword"].txt1.value.toLowerCase() == "make a wish")
window.location.href='http://www.googlegive.com/charity/makeawish.html';

else if(document.forms["keyword"].txt1.value.toLowerCase() == "autism speaks")
window.location.href='http://www.googlegive.com/charity/autismspeaks.html';

else window.location.href='http://www.googlegive.com/charity/nocharity.html';
}

kimberlyhello
10-01-2007, 01:09 AM
That was so easy!

It would have taken me a lot longer to figure that out on my own...so thank you.

If I were to try and make this work for people without javascript, would I just create a dropdown menu? and if so, do I just use an if then statement?

For example,
If javascript enabled, then use the googlegive function.

If javascript disabled, then use a drop-down menu.

:) :p ;) :D

jscheuer1
10-01-2007, 04:36 AM
Well, most drop down menus also require javascript. I was thinking more along the lines of a server side solution. That would depend partly upon what is available on your server. PHP is the most common. Without using the server, you could have a script to write out the form and have simple links to the various pages in a <noscript></noscript> tag that would be available to non-javascript enabled users.