Submit & Reset the Form Using Images?

[peggasus88]

Hi,

I have a very simple form, consisitng of just a textbox for the user's ID number. I would like Submit and Reset images that have the same functionality that buttons of type="submit" or type="reset" have...


The FORM tag:
<form action=&quot;CheckLogin.asp&quot; id=&quot;FORM&quot; method=&quot;post&quot; name=&quot;FORM&quot; LANGUAGE=&quot;javascript&quot; onsubmit=&quot;return validateID()&quot;>


The Submit and Reset images:
<P><input type=&quot;image&quot; src=&quot;images/GoButton.gif&quot;> <input type=&quot;image&quot; src=&quot;images/ResetButton.gif&quot; onclick=&quot;rst()&quot;></P>


The validateID() function used to check if the input is an 8-digit number:
function validateID() {
ID = FORM.txtID.value;
numDigitsInID = FORM.txtID.value.length;

bPass = true;

if (ID == &quot;&quot; || numDigitsInID != 8 || isNaN(ID)) {
alert (&quot;ID should be 8 digits \n Example: 10666088&quot;
document.FORM.txtID.focus();
bPass = false;
}
return bPass;
}


The rst() function used to clear the textbox:
function rst() {
FORM.txtWWID.value = &quot;&quot;;
document.FORM.txtWWID.focus();
}


The Submit image works AOK, although I have no idea why! The problem is with the Reset image. Some examples: If I don't enter anything into the textbox and click the Reset image, I get the alert that the ID should be 8 digits, but I'm NOT calling the validateID() function, I'm calling the rst() function! The strangest thing is that if I enter a VALID 8-digit ID, I still get the alert.

I've tried all sorts of things...I read that onclick=&quot;document.FORM.submit() submits a form so I unsuccessfully tried using onclick=&quot;document.FORM.reset()&quot; to reset the form. I've tried using buttons of type=&quot;reset&quot; with the image as the backgroud. But I had trouble with the sizing. If I move the Reset image outside the /FORM tag, then the correct function is called! But I can't get the buttons positioned next to each other.


I think this would just about drive anyone crazy! Newbie here (you can probably tell from my code and the issues I'm experiencing). Please help explain what is going on. =)

Peggy

 

[Einstein47]

The reason is that the <INPUT type=&quot;image&quot;> IS in reality a submit button. So clicking the &quot;Reset&quot; image is actually calling the submit of the function.

The solution is easy. You have two options, either:

1) add the following line as the last statement of your rst() function.

return false;

or

2) don't use the <INPUT type=&quot;image&quot;> for the reset, instead use

<A href=&quot;javascript:rst();&quot;><IMG src=&quot;images/ResetButton.gif&quot; border=0></A>

Let me know which method you choose. Einstein47
(Love is like PI - natural, irrational, endless, and very important.)

 

[peggasus88]

Hi 'Einstein47'

Thank you so much! I really was going to go mad. =)
I chose Method 2 because it looked interesting. =) Works great.

Thanks again.