Why is this javscript not working in Chrome?

Hi all,
I have a simple big of JS (shown below), that takes the contents of one textfield, does a bit of converting then writes it to another field.

It works fine in IE, but not in Chrome, can anyone see why?


<script>

function set_filename() {

var filename=document.getElementById('title').value;

filename = filename.replace(/ /img, "_");
filename = filename.replace(/\?/img, "");
filename = filename.toLowerCase()
filename = filename+'.html';

document.getElementById('filename').value=filename;

}

</script>

Open in new window

fox_stattonAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Gurvinder Pal SinghCommented:
not sure what html code you are using, but this one works for me
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script>

function set_filename() {

var filename=document.getElementById('title').value;

filename = filename.replace(/ /img, "_");
filename = filename.replace(/\?/img, "");
filename = filename.toLowerCase()
filename = filename+'.html';

document.getElementById('filename').value=filename;

}

</script>
</HEAD>

<BODY>
	<input type="text" id="title" onblur="set_filename()"/>
	<input type="text" id="filename"/>
</BODY>
</HTML>

Open in new window

0
Kiran SonawaneProject LeadCommented:
Looks fine to me in chrome

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<link href="form.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
  set_filename();
});
function set_filename() {
var filename=document.getElementById('title').value;
filename = filename.replace(/ /img, "_");
filename = filename.replace(/\?/img, "");
filename = filename.toLowerCase()
filename = filename+'.html';
document.getElementById('filename').value=filename;

}

</script>
</head>

<body>
<input  type="input" id="title" value="My page?"/>
<input  type="input" id="filename"/>
</body>
</html>

Open in new window

screenshot.png
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

ienaxxxCommented:
Could you please tell us What's the error / wrong behav. it throws?

The only thing can be better done is to identify the space with its proper class \s .

Try with it and please report the problem.

HTH
Bye!
0
ienaxxxCommented:
Yeah, you should be sure to recall the function AFTER the page load, or at least after the creation of the html objects involved.

Since i think you're firing the function onfocus, onblur or while typing in the first field, this is not a problem.

Try replacing / / with /\s/
0
fox_stattonAuthor Commented:
Hi all,
When I click on the button that triggers the behaviour, nothing happens in chrome...
Do you think the button code could be wrong:


 <a href="#" onClick="set_filename();"><img src="/wand.gif" border="0" /></a>
0
Gurvinder Pal SinghCommented:
make it

 <a href="#javascript:set_filename();"><img src="/wand.gif" border="0" /></a>
0
Kiran SonawaneProject LeadCommented:
Nothing wrong with button code. Place alert in your function to check whether function is calling or not
0
Kiran SonawaneProject LeadCommented:
OR try below code whether it is working in chrome or not.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<link href="form.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

function set_filename() {
var filename=document.getElementById('title').value;
filename = filename.replace(/ /img, "_");
filename = filename.replace(/\?/img, "");
filename = filename.toLowerCase()
filename = filename+'.html';
document.getElementById('filename').value=filename;
}

</script>
</head>

<body>
<input  type="input" id="title" value="test My page?"/>
<input  type="input" id="filename"/>
<a href="#" onClick="set_filename();"><img src="/wand.gif" border="0" /></a>
</body>
</html>

Open in new window

0
fox_stattonAuthor Commented:
Nope, still nothing.
In chrome is not coming up with an error or anything, just not working.
0
Gurvinder Pal SinghCommented:
see if this code works for you, since it works for me
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script>

function set_filename() {

var filename=document.getElementById('title').value;

filename = filename.replace(/ /img, "_");
filename = filename.replace(/\?/img, "");
filename = filename.toLowerCase()
filename = filename+'.html';

document.getElementById('filename').value=filename;

}

</script>
</HEAD>

<BODY>
	<input type="text" id="title" onblur="set_filename()"/>
	<input type="text" id="filename"/>

	<br>

	<a href="#javascript:set_filename();">Try it</a>
</BODY>
</HTML>

Open in new window

0
fox_stattonAuthor Commented:
That works fine.
But when I put it into my other script it stops working.

Is there a way I can debug js in chrome and see all the errors coming up when I click on a button? Still continues to work in IE.
0
fox_stattonAuthor Commented:
Here is a complete page, which works in IE but not in Chrome....
<html>
<head>
<script>
function set_filename() {
var filename=document.getElementById('title').value;
filename = filename.replace(/ /img, "_");
filename = filename.replace(/\?/img, "");
filename = filename.toLowerCase()
filename = filename+'.html';
document.getElementById('filename').value=filename;

}



</script>



<body bgcolor= "#FFFFFF" text="#000000">

<form action="f.php" method="post" name="form1" target="_parent" id="form1">

     <input type="text" name="title" size="55" value="" > 

 <input name="filename" type="text" id="filename" size="30" value="">

              <a href="#" onClick="set_filename();"><img src="/images/wand.gif" border="0" /></a>
			  </body>
			  </html>

Open in new window

0
Kiran SonawaneProject LeadCommented:
Check this
<html>
<head>
<script>
function set_filename() { 
var filename=document.getElementById('title').value;
filename = filename.replace(/ /img, "_");
filename = filename.replace(/\?/img, "");
filename = filename.toLowerCase()
filename = filename+'.html';
document.getElementById('filename').value=filename;

}



</script>



<body bgcolor= "#FFFFFF" text="#000000">

<form action="f.php" method="post" name="form1" target="_parent" id="form1">

     <input type="text" name="title" id="title" size="55" value="" > 

 <input name="filename" type="text" id="filename" size="30" value="">

              <a href="#" onClick="set_filename();"><img src="/images/wand.gif" border="0" /></a>
        </body>
        </html>

Open in new window

0
Kiran SonawaneProject LeadCommented:
<input type="text" name="title" size="55" value="" >  this should be
 <input type="text" name="title" id="title" size="55" value="" > 
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ienaxxxCommented:
sonawanekiran is right.
You forget to put the id attrib.
0
fox_stattonAuthor Commented:
Can believe I missed that, thanks guys!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.