onclick on <a> causing strange behavior, please help?

[Erland]

Hello All,

I've registered a handler on 's onclick and in this handler I try to
change the style of a textbox. More specifically, I try to change the
border of textbox to "solid black 1px" which is originally set to
"0px". Now part of the problem is that code in handler only occurs for
a 1/10th of a second, that is I see the textbox's border turning into
"solid black 1px" but that just happens for 1/10th of a second and
textbox's border again becomes "0px". I can't figure out why onclick
handler on happens for a flicker and why don't changes that I'm
making in this handler persist. Please pardon my ignorance, I'm just
learning DOM/DHTML and Javascript.

Here is my html
<div class="frame">
FirstName: <input type="text" value="Waqas" class="fname"></input><br>

Edit <!--This is my anchor tag, HTML viewing might skim it, it has a
class with name 'editt-->


<br>
</div>
here is my handler
function editHandler(event)
{
var e=event || window.event;
var node=this.parentNode;
if (node != null)
{
for (var i=node; node.nodeName != "INPUT" ; i
=node.previousSibling)
node=i;

node.focus();
node.value ="Hello there, after edit";
node.style.border="solid black 1px";
this.value='Save';
alert("everything is fine");



return true;
}
else
{
alert("Some error occured");
return false;
}
and here is the css included in my HTML head
function editHandler(event)
{
var e=event || window.event;
var node=this.parentNode;
if (node != null)
{
for (var i=node; node.nodeName != "INPUT" ; i
=node.previousSibling)
node=i;

node.focus();
node.value ="Hello there, after edit";
node.style.border="solid black 1px";
this.value='Save';
alert("everything is fine");



return true;
}
else
{
alert("Some error occured");
return false;
}


I will really appreciate any help

 

[Lee]

Erland said:

Hello All,

I've registered a handler on 's onclick and in this handler I try to
change the style of a textbox. More specifically, I try to change the
border of textbox to "solid black 1px" which is originally set to
"0px". Now part of the problem is that code in handler only occurs for
a 1/10th of a second, that is I see the textbox's border turning into
"solid black 1px" but that just happens for 1/10th of a second and
textbox's border again becomes "0px". I can't figure out why onclick
handler on happens for a flicker and why don't changes that I'm
making in this handler persist. Please pardon my ignorance, I'm just
learning DOM/DHTML and Javascript.

Here is my html
<div class="frame">
FirstName: <input type="text" value="Waqas" class="fname"></input><br>

Edit <!--This is my anchor tag, HTML viewing might skim it, it has a
class with name 'editt-->


<br>
</div>

I don't see any anchor. My first guess is that the anchor is
behaving as designed, and causing a page load of one form or
another. If what you're seeing is a flicker, then it's most
likely reloading the same page.


--

 

[Erland]

Erland said:










I don't see any anchor. My first guess is that the anchor is
behaving as designed, and causing a page load of one form or
another. If what you're seeing is a flicker, then it's most
likely reloading the same page.

Lee,

Thank you for the reply. I guess you are rigght, it is causing some
sort of page re-load. How can I prevent that? Please enlighten me.

Thanks,
Erland

 

[Aaron Saray]

Lee,

Thank you for the reply. I guess you are rigght, it is causing some
sort of page re-load. How can I prevent that? Please enlighten me.

Thanks,
Erland

You should be able to return false - this will stop the tag from
executing.

 

[Matthew White]

You should be able to return false - this will stop the tag from
executing.

Try using < a href="#" onclick="functionname;" class="edit" > . The # is a
legal link address that does absolutely nothing. This should fix your
problem.

Matt

 

[Lee]

Matthew White said:

Try using < a href="#" onclick="functionname;" class="edit" > . The # is a
legal link address that does absolutely nothing. This should fix your
problem.

It really does not do "absolutely nothing". It's an anchor link to
the top of the current page. That means that it may reposition the
page within the browser or may even reload it. Browser's choice.

The best solution is to not use an anchor tag if you don't want
to go anyplace. Just add an onclick handler to some other tag.
If you insist on using an anchor, the onclick handler should
return false to prevent the link from continuing.


--

 

[Thomas 'PointedEars' Lahn]

"Aaron Saray" [...] wrote [...]:

Erland said:
[Using onclick in an anchor causes styled textbox to flicker]
Here is my html
<div class="frame">
FirstName: <input type="text" value="Waqas" class="fname"></input><br>
Edit <!--This is my anchor tag, HTML viewing might skim it, it has a
class with name 'editt-->
<br>
</div>
I don't see any anchor. My first guess is that the anchor is
behaving as designed, and causing a page load of one form or
another. If what you're seeing is a flicker, then it's most
likely reloading the same page.
[...]
Thank you for the reply. I guess you are rigght, it is causing some
sort of page re-load. How can I prevent that? Please enlighten me.
[...]

You should be able to return false - this will stop the tag from
executing.

Try using < a href="#" onclick="functionname;" class="edit" > . The # is a
legal link address that does absolutely nothing. This should fix your
problem.

And introduce at least one other. Please read the FAQ before you post.


PointedEars