[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Why is this javscript not working in Chrome?

Posted on 2011-10-04
17
Medium Priority
?
369 Views
Last Modified: 2012-05-12
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

0
Comment
Question by:fox_statton
  • 5
  • 5
  • 3
  • +2
17 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36908857
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
 
LVL 15

Expert Comment

by:Minh Võ Công
ID: 36908866
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36908867
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Expert Comment

by:ienaxxx
ID: 36908876
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
 
LVL 10

Expert Comment

by:ienaxxx
ID: 36908894
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
 

Author Comment

by:fox_statton
ID: 36909341
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36909351
make it

 <a href="#javascript:set_filename();"><img src="/wand.gif" border="0" /></a>
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36909375
Nothing wrong with button code. Place alert in your function to check whether function is calling or not
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36909381
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
 

Author Comment

by:fox_statton
ID: 36909384
Nope, still nothing.
In chrome is not coming up with an error or anything, just not working.
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 36909623
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
 

Author Comment

by:fox_statton
ID: 36913241
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
 

Author Comment

by:fox_statton
ID: 36913326
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
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36914700
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
 
LVL 17

Accepted Solution

by:
sonawanekiran earned 2000 total points
ID: 36914702
<input type="text" name="title" size="55" value="" >  this should be
 <input type="text" name="title" id="title" size="55" value="" > 
0
 
LVL 10

Expert Comment

by:ienaxxx
ID: 36915621
sonawanekiran is right.
You forget to put the id attrib.
0
 

Author Closing Comment

by:fox_statton
ID: 36915878
Can believe I missed that, thanks guys!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question