HTML input type=image in ASP.NET 1.1 causing current page to reload

[jon]

Hi

This might be an easy one to answer but I have a web form in an ASP.NET
1.1 application with a hand-rolled HTML image button as follows which
opens a help guide in a new window:

<input type= "image " id= " imgHelp "
onclick="javascript:void(window.open('<%
Response.Write(ConfigurationSettings.AppSettings["HelpURL"]); %>')) ">

The problem that I have is that when the image button is clicked, the
current page re-fires a Load event even though the link launches a new
window and navigates to an external page.

How do I stop the Load event on the user's current page being re-fired?
I've deliberately not used a ImageButton control as the post back would
cause a re-load but even by using a HTML element it seems a postback
is still occurring. Annoying...

Or is there another way of launching a new window from an image button
without causing a page reload?

Jon

 

[jon]

As is usually the case, just realised what the problem is straight
after posting. The form element has runat=server so all input controls
cause a postback so I changed the image button (input type=image)
element to a plain img element and attached an onclick javascript
handler and a cursor: hand; style to simulate an image button.

Updated code:

< img style= "cursor:hand;" id="imgHelp"
onclick="javascript:void(window.open('<%
Response.Write(ConfigurationSettings.AppSettings["HelpURL"]); %>'))"
src="images/help.gif">

 

[Laurent Bugnion]

Hi,

As is usually the case, just realised what the problem is straight
after posting. The form element has runat=server so all input controls
cause a postback so I changed the image button (input type=image)
element to a plain img element and attached an onclick javascript
handler and a cursor: hand; style to simulate an image button.

Many things are incorrect in your post.

- The fact that the form has runat=server is not the cause for your
problem. In fact, even without runat=server, the input type=image causes
a postback, it's just what it's made for (don't forget that these
elements were defined in a time when JavaScript didn't exist). You had
two ways to cause a postback: either click on a "submit" button, or
click on an image button, which is exactly what you did. Runat=server
simply makes the form available ("visible") to the server side code.

- Second, Images don't have a onclick event handler, at least not in the
standard HTML definition. To make an image "button", you use

<a href="#" onclick="..."><img ...></a>

Replace "..." with the appropriate code. Don't forget that your
application is loaded on all kind of clients, so using standards is
always a good idea.

- Using the "javascript:" pseudo-protocol is only useful when you
execute JavaScript code in the URL bar of the browser. In all other
circumstances, it is not needed, and can even cause problems. So you
onclick code should be

onclick="window.open('<%Response.Write(ConfigurationSettings.AppSettings["HelpURL"]);%>');return
false;"

I added return false to specify that the HREF part of the link must not
be executed.

- Embedding ASP.NET code in your HTML code is a bad idea. It's the old
way of doing things. You don't want this for many reasons. Instead, you
can use an ASP Hyperlink, for example, and specify the onclick in the
code behind.

HTH,
Laurent