onClick and href="#"

J

Jez

Hi,

I've created a function which opens a popup window containing a
calendar. When a day is clicked, the date is entered into a text box
on the parent page and the popup is closed.

The link I'm using on the parent page is ...

<a href="#" onClick="popupcal()">choose date</a>

My form is quite long, and when the popup is opened I'm returned to
the top of the page meaning I then have to scroll down again to
continue entering information.

I'm assuming this is due to the href="#" part of the link? Is there
any way I can avoid this problem?

Many thanks!

Jez
 
L

Laurent Bugnion, GalaSoft

Hi,
Hi,

I've created a function which opens a popup window containing a
calendar. When a day is clicked, the date is entered into a text box
on the parent page and the popup is closed.

The link I'm using on the parent page is ...

<a href="#" onClick="popupcal()">choose date</a>

My form is quite long, and when the popup is opened I'm returned to
the top of the page meaning I then have to scroll down again to
continue entering information.

I'm assuming this is due to the href="#" part of the link? Is there
any way I can avoid this problem?

Many thanks!

Jez

To cancel the link's action, you must return false in the ONCLICK event
handler.

Note that it is best to avoid # in the HREF, and instead link to a page
explaining why JavaScript should be enabled for this functionality, or
offering some workaround.

<a href="noJs.html" onClick="popupcal();return false;">choose date</a>

Laurent
 
R

Richard Hockey

<a href="#" onClick="Dofunction(); return false;">

The browser executes the OnCLick event first, and only follows the href if
the OnClick event/javascript function returns true. If you place 'return
false' in the OnClick the href is ignored. (assuming javascript is enabled
in the browser)

You can do the same sort of thing for form validation

function Validate()
{

if(form.element.value is invalid)
{
alert('element n is invalid.');
form.element.focus();
return false;
}

return true;
}

<form name="myform" method="get" action="process.asp" onSubmit="return
Validate();">
 
S

Stuart Palmer

return false; after popupcal(); this will stop the href running.

You could also put href="javascript:popupcal();" but this won't work for non
js users so I'd suggest putting the same page the popup loads in the href,
target="_blank" and return false on the click.

So :-

<a href="page.html" onClick="popupcal('page.html');return false;"
target="_blank">date</a>

Now this is general for all popups. To ensure you cover JS and non JS
people, but don't forget, the text input bit on the parent for non JS people
won't work.

Good luck hope that helps.

Stu
 
M

Markus Ernst

Note that it is best to avoid # in the HREF, and instead link to a page
explaining why JavaScript should be enabled for this functionality, or
offering some workaround.

<a href="noJs.html" onClick="popupcal();return false;">choose date</a>

It is even better to write the url of the file shown in the popup in the
href attribute, so people without Javascript AND searchengines will find the
page, too.
 
G

Grant Wagner

Stuart said:
return false; after popupcal(); this will stop the href running.

You could also put href="javascript:popupcal();" but this won't work for non
js users so I'd suggest putting the same page the popup loads in the href,
target="_blank" and return false on the click.

So :-

<a href="page.html" onClick="popupcal('page.html');return false;"
target="_blank">date</a>

Given your structure, I'd go one step further and recommend:

<a href="page.html"
onClick="popupcal(this.href);return false;"
target="_blank">date</a>

Specifically, substituting this.href for page.html. That way, if you ever need
to revise the site structure, you can simply change the HREF, as you would with
an ordinary HTML link.

--
| Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 6/7 and Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top