<input type="image" onclick="history.back();"> problem

[rpeters74]

<input
type=&quot;image&quot;
name=&quot;btnBack&quot;
id=&quot;btnBack&quot;
src=&quot;/Image/back.gif&quot; onmouseover=&quot;this.src='/Image/back_over.gif';&quot;
onmouseout=&quot;this.src='/Image/back.gif';&quot;
align=&quot;absMiddle&quot;
title=&quot;Click to go back a page.&quot;
onclick=&quot;history.back();&quot;>

This is not working. The same code works for input type=button but not image? Any help at all would be appreciated.

 

[jemminger]

try

history.go(-1);

 

[rpeters74]

history.go(-1) is doing the same thing as history.back() did (the screen flickers but the same page reloads). I put a regular button right next to the image button with the same onclcik event and it worked.

Does anyone know if this is typical functionality for a <input type=image>?

 

[rpeters74]

After scouring some newsgroup I found a fix (not sure if I would call it a solution).

Anyhow, it seems that an <input type=&quot;image&quot;> will not handle the onclick=&quot;history.back();&quot; event for some reason. Doing this allows it to work:

<input
type=&quot;image&quot;
name=&quot;btnBack&quot;
id=&quot;btnBack&quot;
src=&quot;/Image/back.gif&quot;
onmouseover=&quot;this.src='/Image/back_over.gif';&quot;
onmouseout=&quot;this.src='/Image/back.gif';&quot;
align=&quot;absMiddle&quot;
title=&quot;Click to go back a page.&quot;
onclick=&quot;history.back(); return false;&quot;>

============

Thanks for your rapid input jemminger!

 

[SashiRaveendran]

the onclick just requires a 'return false' statement after the function call as it will then try to fire the submit event of the form. To stop this default behaviour you must put the return false statement after the function call. Its to do with something called event bubbling (i think). Its the same reason as <a href=&quot;#&quot; onclick=&quot;alert('hello')&quot;> trys to go off to # and <a href=&quot;#&quot; onclick=&quot;alert('hello'); return false&quot;> doesnt

 

[jemminger]

interesting...you learn something new every day.

 

[starway]

<input type=&quot;image&quot;> was designed as a replacement for <input type=&quot;submit&quot;> only, thus there are many limitations in it's use.

If you want to make a graphis link that works as &quot;Back&quot; button all you need is this:

<a href=&quot;#&quot; onclick=&quot;history.back()&quot; title=&quot;Click to go back a page.&quot;><img src=&quot;&quot; border=&quot;0&quot; ... alt=&quot;go back&quot;></a>

You can replace history.back() with history.go(-1) as it does the same thing.

good luck

 

[xutopia]

as it was explained using return false fixes the problem.

Here are a few other usages of return values :

FORMS

<script>
function checkForm(form)
{
if (form.username.value != &quot;&quot
{
return true;
}
else
{
return false
}
}
</script>

<form onsubmit=&quot;return checkForm();&quot;>
<input type=text name=username>
<input type=submit value=&quot;Try Me&quot;>
</form>

That form will only submit if you have something inside the username field.

LINKS

<form name=checkForm>
I accept the user agreement
<input type=checkbox name=accepted>
</form>

<a href=&quot;acceptedUserAgreement.html&quot; onclick=&quot;return document.checkForm.accepted.checked&quot;>Continue</a>

If someone has not checked the user agreement checkbox he will not be able to access the page (well he could, this is just an example of technically how return could be used).

Hope this helps. Gary

http://www.xutopia.com

Haran