Using image for reset button

[Animesh K]

What's the best practice for using an image for a reset button?
Unfortunately, we cannot use <input type="image" src="..."> in this case.

Any helpful tutorial from the web will be appreciated.

I ran a google search, but a lot of "use my script" type junk websites
are showing up.

Best regards,
Animesh

 

[ed]

You can simply add an image, and give it an onclick event to clear the
form data

document.FormName.reset();

 

[Animesh K]

You can simply add an image, and give it an onclick event to clear the
form data

document.FormName.reset();

Let me be more specific. I have a "contact us" link which floats an
invisible form by making it visible. I want to put an "abort" button on
the form so that should "reset" the form as well as "make the form
invisible"

I did manage to achieve the effect (see contact us link at the bottom of
the following page:

http://www.stutimandal.com/gif_misc/indra_krta_rama_stotram.php

)

But I am not sure if this is the best method to implement the task at
hand. It works, obviously.

By the way, the page is under construction, so there may be some errors,
here and there. If you find something nasty, please let me know.

Best regards,
Animesh

 

[RvT]

What's the best practice for using an image for a reset button?
Unfortunately, we cannot use <input type="image" src="..."> in this case.

Any helpful tutorial from the web will be appreciated.

I ran a google search, but a lot of "use my script" type junk websites
are showing up.

Best regards,
Animesh

<form name="theform">
<input type="text" size="10" id="afield" name="afield" value="defaut
value" />
<a onclick="document.theform.reset();return false;"
href="#"><img src="test.png" border="0" alt="" width="283"
height="40" /></a>
</form>

 

[RvT]

<form name="theform">
<input type="text" size="10" id="afield" name="afield" value="defaut
value" />
<a onclick="document.getElementById('theform').style.visibility =
'hidden';"
href="javascript:document.theform.reset();return false;"><img
src="frank-herrmann/images/photos/frontpage.jpg" border="0" alt=""
width="283" height="212" /></a>



With making the form invisible.

 

[Randy Webb]

RvT said the following on 6/21/2007 10:06 PM:

<form name="theform">
<input type="text" size="10" id="afield" name="afield" value="defaut
value" />
<a onclick="document.getElementById('theform').style.visibility =
'hidden';"
href="javascript:document.theform.reset();return false;"><img
src="frank-herrmann/images/photos/frontpage.jpg" border="0" alt=""
width="283" height="212" /></a>



With making the form invisible.

Geez, what is it with people posting garbage code that shouldn't even be
considered for a trash can?

Try reading the group FAQ and a thread from just yesterday where it was
explained the best way to make a button/image/link for JS only and
javascript: pseudo-URLs.

Try quoting also.

 

[Evertjan.]

RvT wrote on 22 jun 2007 in comp.lang.javascript:

<form name="theform">
<input type="text" size="10" id="afield" name="afield" value="defaut
value" />
<a onclick="document.theform.reset();return false;"
href="#"><img src="test.png" border="0" alt="" width="283"
height="40" /></a>
</form>

<script type='text/javascript'>
function resetMe(f){
f.reset();
f.style.display = "none";
// or: f.style.visibility = "hidden";
};
</script>

<form name='theform'>
<input type='text' name='afield' value='default'>
<br>
<img src='reset.jpg'
onclick='resetMe(document.forms["theform"]'>
</form>

 

[Evertjan.]

Evertjan. wrote on 22 jun 2007 in comp.lang.javascript:

RvT wrote on 22 jun 2007 in comp.lang.javascript:

<form name="theform">
<input type="text" size="10" id="afield" name="afield" value="defaut
value" />
<a onclick="document.theform.reset();return false;"
href="#"><img src="test.png" border="0" alt="" width="283"
height="40" /></a>
</form>

<script type='text/javascript'>
function resetMe(f){
f.reset();
f.style.display = "none";
// or: f.style.visibility = "hidden";
};
</script>

<form name='theform'>
<input type='text' name='afield' value='default'>
<br>
<img src='reset.jpg'
onclick='resetMe(document.forms["theform"]'>
onclick='resetMe(document.forms["theform"]);'>


</form>

 

[Animesh K]

Evertjan. wrote on 22 jun 2007 in comp.lang.javascript:

Thank you Evertjan! I think I have implemented something similar. I will
update my code in case it is different from your's. Thanks again,

Animesh

 

[Evertjan.]

Animesh K wrote on 22 jun 2007 in comp.lang.javascript:

Thank you Evertjan! I think I have implemented something similar. I
will update my code in case it is different from your's. Thanks again,

"in case it is different... " ????????

Rest assured it IS different!

By not quoting the crux of the matter, you make it dificult to respond.

<a onclick="document.theform.reset();return false;"
href="#"><img src="test.png" border="0" alt="" width="283"
height="40" /></a>

<img src='reset.jpg'
onclick='resetMe(document.forms["theform"]'>

So I did away with the impractical

<a onclick='...' href='#">....

which only confuses the issue.

and /> which is not usefull at all.

Furthermore I made a function that can be used in more forms,
if needed.

 

[Animesh K]

Animesh K wrote on 22 jun 2007 in comp.lang.javascript:

Thank you Evertjan! I think I have implemented something similar. I
will update my code in case it is different from your's. Thanks again,

"in case it is different... " ????????

Rest assured it IS different!

By not quoting the crux of the matter, you make it dificult to respond.

<a onclick="document.theform.reset();return false;"
href="#"><img src="test.png" border="0" alt="" width="283"
height="40" /></a>

<img src='reset.jpg'
onclick='resetMe(document.forms["theform"]'>

So I did away with the impractical

<a onclick='...' href='#">....

which only confuses the issue.

and /> which is not usefull at all.

Furthermore I made a function that can be used in more forms,
if needed.

You are confusing things with the code that RvT posted here. I have used
something different than RvT.

Check my code out here:

<p><input type="image" src="../images/send_main.png" alt="send"
value="Send Email">
<a href="javascript:fbformdown();"><img class="noline" alt="cancel"
src="../images/cancel_main.png"></a>
</p>

function fbformdown(){
document.likho.reset();
document.getElementById("feedback").style.display="none";
}


when I said I will compare your code to mine, I meant comparing this
above code to what you have suggested.

Regards,
Animesh

 

[Animesh K]

Animesh K wrote on 22 jun 2007 in comp.lang.javascript:

Thank you Evertjan! I think I have implemented something similar. I
will update my code in case it is different from your's. Thanks again,

"in case it is different... " ????????

Rest assured it IS different!

By not quoting the crux of the matter, you make it dificult to respond.

<a onclick="document.theform.reset();return false;"
href="#"><img src="test.png" border="0" alt="" width="283"
height="40" /></a>

<img src='reset.jpg'
onclick='resetMe(document.forms["theform"]'>

So I did away with the impractical

<a onclick='...' href='#">....

which only confuses the issue.

and /> which is not usefull at all.

Furthermore I made a function that can be used in more forms,
if needed.

Ok I just compared my script with your's. Your's is better. You do get
rid of the <a href="javascript"> etc fluff that I had. And you are right
that your function can be used again and again. Thank you, I will update
my script based on your technique.

Best,
A

 

[Evertjan.]

Animesh K wrote on 24 jun 2007 in comp.lang.javascript:

<img src='reset.jpg'
onclick='resetMe(document.forms["theform"]'>

Ok I just compared my script with your's. Your's is better. You do get
rid of the <a href="javascript"> etc fluff that I had. And you are right
that your function can be used again and again. Thank you, I will update
my script based on your technique.

If you wish you can add a hand cursor to help the user:

<img
style='cursor;pointer;'
src='reset.jpg'
onclick='resetMe(document.forms["theform"]'>

 

[scripts.contact]

If you wish you can add a hand cursor to help the user:

<img
style='cursor;pointer;'
style='cursor:hand'

src='reset.jpg'
onclick='resetMe(document.forms["theform"]'>

 

[Evertjan.]

scripts.contact wrote on 25 jun 2007 in comp.lang.javascript:

style='cursor:hand'

Only if you advice to use them both, broadening the cross browser
functionallity with older forms of IE, < IE5.5 I believe.

style='cursor:hand;cursor;pointer;'

However, as the absense of that will do a "graceful degradation" to those
few users.

 

[Animesh K]

scripts.contact wrote on 25 jun 2007 in comp.lang.javascript:


Only if you advice to use them both, broadening the cross browser
functionallity with older forms of IE, < IE5.5 I believe.

style='cursor:hand;cursor;pointer;'

However, as the absense of that will do a "graceful degradation" to those
few users.

Thank you for this extra information. I am planning to add a "glowing
button" effect to the reset image (so that user knows something can be
clicked).

Hand cursor can be an added functionality.


Is it a good idea to enforce users to enable javascript for my website?
My website is a free archive of ancient literature (so it is in users'
interest to visit my website). I am planning to do that since all these
functions will require javascript to be enabled.

Best regards,
Animesh

 

[scripts.contact]

scripts.contact wrote on 25 jun 2007 in comp.lang.javascript:



Only if you advice to use them both, broadening the cross browser
functionallity with older forms of IE, < IE5.5 I believe.

No. i was correcting the ; and then used the wrong value.

style='cursor:hand;cursor;pointer;'

style="cursorointer"

 

[Evertjan.]

scripts.contact wrote on 26 jun 2007 in comp.lang.javascript:

No. i was correcting the ; and then used the wrong value.


style="cursorointer"

I see your point ; where : should be. ;-(

My advice:

style = 'cursorointer;'

1 Always use the end ; in a style. It looks better and
it is easier to copy/cut paste, drag or copy drag
individual parts of style declarations.

2 I use single quotes as my personal preference in
style='' onclick='' etc.