JavaScript - Innerhtml Code Not Working In Chrome Or Firefox

It works in Google Chrome but not Firefox and Internet Explorer. My computer has blocked Opera and I don't know how to change that. Too much energy to investigate now, I'll do so later.

Are there any pros that can tell me why this is happening?

I'm assuming GoogleChrome is fixing a syntax error that FF and IE don't.

Code:

var request;
request=false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
} 
}
}

function isAlNum(str){
return /^[a-z0-9]+$/i.test(str);
}
var preUsername;
var same;

function updatePage() {
if (username.value.length>0){
if (	 request.responseText.indexOf("0") == -1	 )
{userNameErrorBox.innerHTML=username.value + " has already been taken";
usernameSuccessBox.innerHTML="";}
else
{userNameErrorBox.innerHTML="";
usernameSuccessBox.innerHTML=username.value + " is available";}}
}
function nameTest()
{
if (username.value==preUsername)
{same=1;}
else
{same=0;}
if (!isAlNum(username.value))
{if (username.value.length>0)
{username.value=preUsername;}}
else
{preUsername=username.value;}
if (username.value.length>0 && username.focus && same===0)
{
userNameErrorBox.innerHTML="";usernameSuccessBox.innerHTML="";
request.abort();
var url = "/unseen/checkIfUserNameExist.php?name=" + username.value;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);

}
if (username.value.length===0)
{	userNameErrorBox.innerHTML="";usernameSuccessBox.innerHTML="";preUsername="";	}
}

I back tracked what i did and it appears that this code
Code:

var url = "/unseen/checkIfUserNameExist.php?name=" + username.value;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);

has the problem. When I set up alerts to see what works and what doesn't, this code seems to be causing the FF and IE to not work, but I can't tell what it is that's causing them to fail.

This is javascript that is suppose to check if a name has been taken by another user.

I'm working on a fairly large project that I wish to be the new formspring, (size wise) I procrastinated for 2 weeks of my 12 week break and now that I'm just getting started on it I'm running into an ishness load of problems... Very de-motivating

Since the upgrade from chrome 9 to chrome 10 my script is showing an error in my variables when i use boolean expressions.
they changed to version V8, Chrome's JavaScript engine.

Here is the function

function get_form_value(n){
e=document.getElementById(n);
if ((e.value)&&(e.value != "")&&(!e.options)) return e.value;
if ((e.selectedIndex)&&(e.selectedIndex>0) &&(e.options[e.selectedIndex].value !="")) return e.options[e.selectedIndex].value; // select
if ((e.text)&&(e.text.value !="")) continue;
if ((e.selectedIndex)&&(e.selectedIndex>0) &&(e.options[e.selectedIndex].text !="")) return e.options[e.selectedIndex].text; // select
if ((e.checkbox)&&(e.checkbox.checked)) return true;
return false;
}

When i run it it shows a syntax error:

Can someone please help me fix this?

Hi,

On my website, I have one of those trust seals that opens a new window
to display account details.

Last week it worked fine, but today it is not working.
I am sure that I didn't change the code. It still works in IE
but the Mox Firefox window opens with no address.

This is my js code for the new window:

Code:

<script language="javascript" type="text/javascript">
<!--
var win=null;
function NewWindow(mypage,myname,w,h,scroll){
LeftPosition=300;
TopPosition=150;
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=yes,directories=no,status=no,menubar=no,toolbar=no,resizable=yes';
win=window.open(mypage,myname,settings);
if(win.focus){win.focus();}}

function hidestatus(){
window.status=''
return true
}

if (document.layers)
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT)
document.onmouseover=hidestatus
document.onmouseout=hidestatus

// -->
</script>

And this is my HTML

Code:

<!-- // SF-Code Affiliate Marketing ##ak18d54kt** // --> 
<a href="http://www.support-focus.com/check.php?key=SFM64912" 
onclick="NewWindow(this.href,'','860','700','yes','default'); 
 return false" onfocus="this.blur()" >  
 <img src="http://www.support-focus.com/image_load.php?id=SFM64912" 
 alt="Support-Focus Membership Click to Verify - Before you Buy" border="0" ></a><br><br>

The actual trust seal code appears at the bottom of ths page:
Affiliate Marketing test page

Can anyone see any problems with the code ?

I think I did get a firefox update about a week ago
has anyone noticed any changes ?

( I hope its just my code that is wrong )

Oh BTW
if I just enter the link from the trust seal directly into the browser, it opens fine.
Thanks

I created a page that has an iframe on it. Within this iframe I call an asp page. The asp page is supposed to do some work and then update the innerHTML of a <div> object on the parent page to indicate that processing of the page in the iframe is complete. The code works in IE but not FireFox. I am wondering what is the best way to make the script work for both browsers?

Sub page JavaScript:
Code:

updateParent()
{
parent.document.getElementById("num2").innerHTML = '<center><strong>Processing complete.</strong></center>';
}

Parent page:

Code:

<div id="num2"></div>

Hello all. I'm new here and new to JavaScript. Ive got a snippet of code that's not working. Can you guys help me out? The code is the following:

Code:

function image()
{	
var image = document.getElementById('add_image'); 
image.style.height = '30px';

image.innerHTML = '<div style="margin:5px; width:520px; height:20px;" id="add_images"><input type="file" name="pic" /></div>';
}

The first half of the function is working, but the second half isn't. I originally tried style.visibility = 'visible' but that didn't work so I try innerHTML. Since that didn't work either, I've decided to seek help. Thanks ahead of time.

Hi there,
Ive check the following code in all major browser and it works fine accept ofcourse in IE.
Im trying to take the innerHTML from one row and move it to the one above or below depand on the button you are clicking.
Does anyone have any idea?

Many thanks
mkariti

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
TABLE {
border-collapse: collapse;
}
TBODY {
border-top: solid black 1px;
}
TR {
border-bottom: solid black 1px;
}
</style>
<script type="text/javascript" language="javascript">

var getId;
var row = {
selected: -1,
hoverColor: '#CCCCCC',
defaultColor: '#FFFFFF',
onclick: function (trow, id) {
getId = id;

var r = document.getElementById('row_' + row.selected);
if (row.selected != -1 && r)
r.bgColor = row.defaultColor;
row.selected = id;
trow.bgColor = row.hoverColor;

},
test: function (num) {

var table = document.getElementById("tableId");
var getRowLength = document.getElementById("tableId").rows.length;

if (num == 1) {

// table.rows[getId].parentNode.insertBefore(table.rows[getId], table.rows[getId - 1]);
// getId++;
var tempDown = document.getElementById("row_" + getId).innerHTML;
document.getElementById("row_" + getId).innerHTML = document.getElementById("row_" + (getId + 1)).innerHTML;
document.getElementById("row_" + getId).bgColor = row.defaultColor;
document.getElementById("row_" + (getId + 1)).innerHTML = tempDown;
document.getElementById("row_" + (getId + 1)).bgColor = row.hoverColor;
getId++;


}
else {
// getId--;
// table.rows[getId].parentNode.insertBefore(table.rows[getId + 1], table.rows[getId]);

var tempUp = document.getElementById("row_" + getId).innerHTML;
document.getElementById("row_" + getId).innerHTML = document.getElementById("row_" + (getId - 1)).innerHTML;
document.getElementById("row_" + getId).bgColor = row.defaultColor;
document.getElementById("row_" + (getId - 1)).innerHTML = tempUp;
document.getElementById("row_" + (getId - 1)).bgColor = row.hoverColor;

getId--;

}

}

}

</script>
</head>
<body>
<div>
<table id="tableId">
<tbody>
<tr id="row_1" onclick="row.onclick(this,1);"><td><input type="checkbox"></td><td>Row 1</td><td>A</td></tr>
<tr id="row_2" onclick="row.onclick(this,2);"><td><input type="checkbox"></td><td>Row 2</td><td>B</td></tr>
<tr id="row_3" onclick="row.onclick(this,3);"><td><input type="checkbox"></td><td>Row 3</td><td>C</td></tr>
<tr id="row_4" onclick="row.onclick(this,4);"><td><input type="checkbox"></td><td>Row 4</td><td>D</td></tr>
<tr id="row_5" onclick="row.onclick(this,5);"><td><input type="checkbox"></td><td>Row 5</td><td>E</td></tr>
</tbody>
</table>
</div>
<div>
<button id="btn_down" onclick="row.test(1)">Down</button>
<button id="btn_up" onclick="row.test(2)">Up</button>

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

I'm trying to display a widget that is called through another page. The "test" word shows up, but the WIDGET portion does not. I know the address works, I can call it through the url and it displays fine so that's not the problem. It's something within the javascript.

Here's my code: Code:

<script type="text/javascript">
httpRequest("addressto/xxx/xxx/recent-widget.php", showrecent);

 //Function to call HTTPRequest
 function httpRequest(url, callback) {
  var httpObj = false;
  if (typeof XMLHttpRequest != 'undefined') {
    httpObj = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    try{
      httpObj = new ActiveXObject('Msxml2.XMLHTTP');
    } catch(e) {
      try{
        httpObj = new ActiveXObject('iMicrosoft.XMLHTTP');
      } catch(e) {}
    }
  }
  if (!httpObj) return;
  httpObj.onreadystatechange = function() {
    if (httpObj.readyState == 4) { // when request is complete
      callback(httpObj.responseText);
    }
  };
  httpObj.open('GET', url, true);
  httpObj.send(null);
}

 //Function to display the widget within innerHTML
 function showrecent(WIDGET){
 d = document.getElementById('recent-widget');
 d.innerHTML = "test" + WIDGET;
}
</script>
</head>
<body>
<div id="recent-widget"></div>

</body>
</html>

Can anyone see what's wrong with it?

hi guys, i am new to javascript and have a problem:

I have an empty combobox, and two buttons. What i am trying to do is; adding 2 elements in to te combo box when i click on the button1. And i want to change these values with something else when i hit the button2.

So far i can fill the combo box but i can not change the values when i click on the second button. Here is my code:


Code:

[HTML]<html>
<head>

<script type="text/javascript">

function ce(str)
{
document.getElementById("end").innerHTML=
"mySel.appendChild(document.createElement('option')).text=\""+str+"\";";
}
</script>

</head>

<body>

<h1>TryIt</h1>

<select id="mySel"><script id="end"></script></select>

<input type="button" value="Add" onclick="ce('try');">

<input type="button" value="Add2" onclick="ce('try again');">

</body>

</html>[/HTML]

I want to do this with javascript and using appendChild. If i try to send <option> tags within innerhtml it works but not whis way. why isnt it working?

Hello again;

I am testing in Firefox( two versions ), Chrome, Opera (two versions), Safari
on Mac OSX and am seeing a peculiarity.
Code:

<div id="dialog" style="position:absolute;top:50px;left:600px;">
<div id="head"><p id="panelTitle">Item Info:</p></div>
<p>Drag this panel to move </p>
<pre id="target1"><img id="srcImg" src="windows/img/front_window.jpg" alt="test" /></pre>
<pre id="target2"> </pre>
<div id="closer"><p class="dialog"><a id="dClose" href="javascript:">Close</a></p></div>

event listener assigned to a separate anchor tag makes this markup visible and drag-able.
The mousemove event listener for dragging is assigned to the parent div, id='dialog'

In Firefox and Google's Chrome browser, if I mousedown on the image
and try to drag, the system tries to move and copy the image. When I
release the mouse, the whole panel sticks to the pointer and moves with
the pointer until I click on it.

The Question:
What event would I do preventDefault, cancelbubble, or return false
to get around this?
(perhaps for a separate post, how would I prevent the client form copying
content?)

Safari will do the same accept that it will not stick to the mouse pointer position on mouseup.

In Opera, it works fine (accept the earlier verison, v9x leaves a trail of ghost lines where the panel was moved from)

I have a pc with I.E. and have not yet tested this specific issue.

Thank you for your time and attention
JK

This is a JavaScript sample that works with Internet Explorer and Safari, but not with FireFox and Chrome. If you take the code and save it as test.html open the file with explorer or Safari you will see it works. This is the first time of posted on this forum, sorry if I missed any information. This form posts to a InternetSecure(payment gateway) Sandbox account.

[CODE]
<head>

<title>Variable Payment - JavaScript</title>

</head>

<script language="javascript">

function getamount()

{

prod = "::1::P001::Sample Payment::";

pvalue = document.getElementsByName("payvalue")(0).value;

amount = pvalue + prod;

document.frmdo.Products.value = amount;

}

</script>



<body>



<table align="center" width="600">

<tr>

<td align="center" valign="middle"><big>View Source For HTML Code<br></big><em><strong>Variable Payment - JavaScript</strong></em><br /></td>

</tr>

</table>



<td align="center" valign="top">



<FORM method=post name="frmdo" action="https://test.internetsecure.com/process.cgi" onsubmit="return getamount();">

<input type="hidden" name="GatewayID" value="106" />

<input type="hidden" name="ReturnURL" value="https://testwww.internetsecure.com/merchants/Demopage.asp?page=THK2" />

<input type="hidden" value="https://testwww.internetsecure.com/merchants/Demopage.asp?page=SAM1" name="xxxCancelURL" />

<input type="hidden" name="Products" value="" />



<table align="center" width="600">

<tr>

<td width="300" height="100%" align="right" valign="middle"><font face="Arial, Helvetica, sans-serif" size="2" color="Black">Invoice Number</font></td>

<td width="300" height="100%" align="left" valign="middle"><input type="text" id="Invoice Number" name="xxxMerchantInvoiceNumber" size="8" /></td>

</tr>



<tr>

<td width="300" height="100%" align="right" valign="Middle"><font face="Arial, Helvetica, sans-serif" size="2" color="Black">Payment Amount $</font></td>

<td width="300" height="100%" align="left" valign="middle"><input type="text" name="payvalue" value="" size=10 style="text-align:right;" />

<font face="Arial, Helvetica, sans-serif" size="2" color="Black"> USD</font></td>

</tr>

</table>



<table align="center" width="600">

<tr>

<td width="600" height="100%" align="center" valign="middle"><input type="submit" value="Submit Payment" name="submit" /></td>

</tr>

</table>



<table align="center" width="600">

<tr>

<td width="600" height="100%" align="center" valign="middle">

<!-- Copy this Grahpic to your Host and change the URL to point to your server --><IMG ALIGN=CENTER SRC="https://secure.internetsecure.com/images/visa04.gif" WIDTH=37 HEIGHT=23>

<!-- Copy this Grahpic to your Host and change the URL to point to your server --><IMG ALIGN=CENTER SRC="https://secure.internetsecure.com/images/mc04.gif" WIDTH=37 HEIGHT=23>

<!-- Copy this Grahpic to your Host and change the URL to point to your server --><IMG ALIGN=CENTER SRC="https://secure.internetsecure.com/images/amex04.gif" WIDTH=37 HEIGHT=23>

<!-- Copy this Grahpic to your Host and change the URL to point to your server --><IMG ALIGN=CENTER SRC="https://secure.internetsecure.com/images/disc04.gif" WIDTH=37 HEIGHT=23>

</td>

</tr>

</table>

<table align="center" width="600">

<tr>

<td width="600" height="100%" align="center" valign="middle"><a target="_blank" href="https://testwww.internetsecure.com/cgi-bin/certified.mhtml?merchant_number=106"><img height="33" border="0" align="center" width="98" alt="" src="https://testwww.internetsecure.com/images/ismerch_sm.gif" /></a></td>

</tr>

</table>

</form>
[CODE]

Can anyone tell me why the following works in IE but not the other browsers?

It's the "Select category..." jump menu at this URL: www.savasbeatie.com/books.htm

Code:

<TD>
	                  <form name="whichCat" style="margin-bottom:0" method="get">
                        <select name="catChoice" onChange="sendValue(this);">
                          <option class="news4" value="javascript:location.reload(true)" selected>Select Category...</option>
                          <option class="news4" value="php/IraqWars.php?q=Iraq%20Wars">Iraq Wars/Current Affairs</option>
						  <option class="news4" value="php/AncientHistory.php?q=Ancient%20History">Ancient History</option>
                          <option class="news4" value="php/AmericanRevolution.php?q=American%20Revolution">American Revolution</option>
                          <option class="news4" value="php/NapoleonicWar.php?q=Napoleonic%20War">Napoleonic War</option>
                          <option class="news4" value="php/AmericanCivilWar.php?q=American%20Civil%20War">American Civil War</option>
                          <option class="news4" value="php/IndianWars.php?q=Indian%20Wars">Indian Wars</option>
                          <option class="news4" value="php/WorldWars.php?q=World%20Wars">World Wars</option>
                          <option class="news4" value="php/Naval.php?q=Naval">Naval</option>
                          <option class="news4" value="php/MilitaryScience.php?q=Military%20Science">Military Science</option>
                          <option class="news4" value="php/SportsHistory.php?q=Sports%20History">Sports History</option>
                          <option class="news4" value="php/Other.php?q=Other">Other</option>
                        </select>
                      </form>
                    </TD>

I've been called in to help with this, but did not build the site. There's a frame that's supposed to display the link contents, and it's returning the error:

Error: document.getElementById("SB_Frame") is null
Source File: http://savasbeatie.com/jscripts/SB_util.js
Line: 11

I think it has something to do with the ID of the frame, (from Googling the error and reading some other posts,) but can't figure out where to put the tag.

Thanks for any help. - David

hi,
i m trying to request info from a page using XMLHttpRequest()

but it is working only for ie8 and it returns nothing in ff,chrome

i cant figure out what the problem is........
here is the code

Code:

<html>
 <head>

<script language="JavaScript">
function req()
{
var URL = "http://www.google.com/recaptcha/api/verify?privatekey=key&remoteip=ip&challenge=chal&response=res";
var xx=new Array();;
var request = false;

if (window.XMLHttpRequest) 
	{
	request = new XMLHttpRequest();
	}
else if (window.ActiveXObject) 
	{
	try {
	request = new ActiveXObject("Msxml2.xmlhttp");
		}
	catch (e){
		try{
			request = new ActiveXObject("Microsoft.xmlhttp");
			}
	catch (e){}
			}
	}

request.onreadystatechange = function()
 {
if (request.readyState == 4) 
	{ 
	xx=request.responseText;
	alert(xx);
	}
} 
request.open("GET", URL);
request.send(); 
  }
	
</script>
 </head>
 
 <body onload="req()">
 
 </body>
</html>

ff and chrome are making request but responding null

The following script grabs a string (*.abc.org, e.g. from &sid=xyz.abc.org) from the current URL and changes it (to ABC:abc.org). Everything works perfectly in IE, but Firefox and Chrome appear to get themselves into an endless loop. When I check the URL, xyz.abc.org has successfully been changed to ABC:abc.org, but the page just seems to keep refreshing over and over.

Code:

var tomatch = /abc.org/i;
var usrString = document.referrer;
var is_a_match = tomatch.test(usrString);
var newString = document.URL.replace(/[a-z]*\.abc\.org/, "ABC:abc.org"); if (is_a_match) {
    window.location.replace(newString);
}

Any suggestions much appreciated.

Hi,

This code uses the getElementById to change the background of certain <tr>'s.

In a nutshell there are two buttons, the code checks which one has been clicked, then checks the background colour of a relevant <tr> and depending what it finds changes the colours of the cells.

Works fine in Chrome and Firefox but not in IE and I'm now sorely vexed by it.

Can anyone shed light on the solution please?

Code:

<script language="javascript" type="text/javascript">
        function changeBackgroundColor(objDivID)
        {
            var backColor = new String();

		if ( objDivID == "lifesciences" ) 
		
		{
            backColor = document.getElementById('claire').style.backgroundColor;
		}
		
		if ( objDivID == "healthcare" ) 
		
		{
			backColor = document.getElementById('adrienne').style.backgroundColor;
		}

		if(backColor.toLowerCase()=='#ffffff' || backColor.toLowerCase()=='rgb(255, 255, 255)')
            // IE works with hex code of color e.g.: #eeeeee
            // Firefox works with rgb color code e.g.: rgb(238, 238, 238)
            // Thats why both types are used in If-condition below
            
			{
			
			if ( objDivID == "lifesciences" )
					
        	{

                document.getElementById('david').style.backgroundColor = '#c0c0c0';
				document.getElementById('claire').style.backgroundColor = '#c0c0c0';
				document.getElementById('adrienne').style.backgroundColor = '#ffffff';
				document.getElementById('karen').style.backgroundColor = '#c0c0c0';
				document.getElementById('alice').style.backgroundColor = '#c0c0c0';
				document.getElementById('kelly').style.backgroundColor = '#ffffff';
				document.getElementById('sarah').style.backgroundColor = '#c0c0c0';
				document.getElementById('carolyn').style.backgroundColor = '#c0c0c0';
				document.getElementById('paul').style.backgroundColor = '#c0c0c0';
				document.getElementById('kayleigh').style.backgroundColor = '#c0c0c0';
				document.getElementById('tim').style.backgroundColor = '#c0c0c0';
				document.getElementById('chantal').style.backgroundColor = '#c0c0c0';
				document.getElementById('lee').style.backgroundColor = '#c0c0c0';
				document.getElementById('lisa').style.backgroundColor = '#c0c0c0';
				
			}
			
			else
			
			{

                document.getElementById('david').style.backgroundColor = '#c0c0c0';
				document.getElementById('claire').style.backgroundColor = '#ffffff';
				document.getElementById('adrienne').style.backgroundColor = '#c0c0c0';
				document.getElementById('karen').style.backgroundColor = '#c0c0c0';
				document.getElementById('alice').style.backgroundColor = '#c0c0c0';
				document.getElementById('kelly').style.backgroundColor = '#c0c0c0';
				document.getElementById('sarah').style.backgroundColor = '#c0c0c0';
				document.getElementById('carolyn').style.backgroundColor = '#ffffff';
				document.getElementById('paul').style.backgroundColor = '#ffffff';
				document.getElementById('kayleigh').style.backgroundColor = '#ffffff';
				document.getElementById('tim').style.backgroundColor = '#c0c0c0';
				document.getElementById('chantal').style.backgroundColor = '#c0c0c0';
				document.getElementById('lee').style.backgroundColor = '#c0c0c0';
				document.getElementById('lisa').style.backgroundColor = '#c0c0c0';
			}
			
            }
            else
			
			{

                document.getElementById('david').style.backgroundColor = '#ffffff';
				document.getElementById('claire').style.backgroundColor = '#ffffff';
				document.getElementById('adrienne').style.backgroundColor = '#ffffff';
				document.getElementById('karen').style.backgroundColor = '#ffffff';
				document.getElementById('alice').style.backgroundColor = '#ffffff';
				document.getElementById('kelly').style.backgroundColor = '#ffffff';
				document.getElementById('sarah').style.backgroundColor = '#ffffff';
				document.getElementById('carolyn').style.backgroundColor = '#ffffff';
				document.getElementById('paul').style.backgroundColor = '#ffffff';
				document.getElementById('kayleigh').style.backgroundColor = '#ffffff';
				document.getElementById('tim').style.backgroundColor = '#ffffff';
				document.getElementById('chantal').style.backgroundColor = '#ffffff';
				document.getElementById('lee').style.backgroundColor = '#ffffff';
				document.getElementById('lisa').style.backgroundColor = '#ffffff';
				
			}
			
		}
            

    </script>

ok so ive nearly finished the animated javascript in my site.
http://calumk.com/

to see the effect launch in chrome or safari, it works fine..
but its not working in Firefox
(and i havent tested IE.. if someone could, i would appreciate it)

i have no-idea why.. .
im using the http://berniecode.com/writing/animator.html library
which works fine in all browsers..

Any help would be apreciated...

I would post the code, but its probably easier if you just view source