Image submit and reset buttons

[mviverette]

The URL of the page I need help with is:
http://www.teampittsburgh.com/admin_announce.shtml

Here is my problem. When I hit the Add to database button, the form submits, unless the message box is blank. When I hit the reset button, i want the link to run function myReset(), but instead it submits the form because an input type=image field automatically submits the form. How do I work around this? Take a look at my code...

Javascript:



<script language = "Javascript">

function mySubmit() {
if (document.addannouncement.message.value == '') {
alert('You must enter a message for this announcement.');
return false;
}
else {
return true;
}
}

function myReset(which){
var pass=true
var first=-1
if (document.images){
for (i=0;i<which.length;i++){
var tempobj=which.elements[i]
if (tempobj.type=="text"){
eval(tempobj.value="")
if (first==-1) {first=i}
}
else if (tempobj.type=="checkbox") {
eval(tempobj.checked=0)
if (first==-1) {first=i}
}
else if (tempobj.col!="") {
eval(tempobj.value="")
if (first==-1) {first=i}
}
}
}
which.elements[first].focus()
return false
}
</script>



Submit buttons HTML:



<a href="javascript:document.addannouncement.submit()" onClick="return mySubmit()"><input type="image" border="0" name="imgSubmit" src="/admin/admin_announcements_db_add.gif" width="137" height="24"></a>

<a href="javascript:document.addannouncement.reset()" onClick="myReset(this)"><input type="image" border="0" name="imgReset" src="/admin/admin_announcements_db_reset.gif" width="137" height="24"></a>



Please help! I am available via e-mail at m a t t @ t e a m p i t t s b u r g h . c o m. Then I will provide you with my IM handle so we can work on it, or you could just tell me how to fix it!

Thanks for anybody who can help!

[gcrowan]

Try this:

<input type="image" name="imgReset" src="/admin/admin_announcements_db_reset.gif" width="137" height="24" border="0" onClick="myReset(this);return false;">

I get script errors but I assume it is because I am lacking all of the page elements.

[Charles]

1) Relying upon JavaSCript will give you a page that fails for the 13% of users who do not use JavaScript.

2) The "image" type of INPUT element is, by definition, a submit button. You need no JavaScript to make it work. You can also use instead

<button type="submit"><img alt="submit" src="submit.png"></button>
<button type="reset"><img alt="reset" src="reset.png"></button>

See http://www.w3.org/TR/html4/interact/forms.html.

[gcrowan]

Charles is correct however, if 13% of users don't use javascritpt, that means that 87% do. That is not a bad percentage. As long as those of us who create and produce websites cater to every browser and every system, then there will always be a 13%. When those 13% can't use the web because they are not enabling javascript or they use a browser with outdated DOMs, then it will be they who will change and not we who slave and struggle over how to script.

Why don't browsers have warning lables?

[mviverette]

the button idea is ugly, but thats okay because i figured out my problem. the input type=image comes before the javascript returns a false in the "order of operations." so i just took out the input type and changed it to img src. anyways, this is just for an administration panel that only 3 or 4 people will use and i am sure they all have an updated browser because i set up the computers they are using!

thanks for your help.