clear form values button

adamhw · August 5th, 2010, 04:55 PM

Hi there

I'm using a css button to try and clear the values of a form (like a standard reset button does) but I can't get it to function:

this is what I'm using:

<input type="reset" src="images/btn_clearnumbers.png" onclick="document.checkoutr_frm.reset();return false;" />

Wondering if someone can shed any light on this?

thanks

Adam

Imar · August 5th, 2010, 04:58 PM

Hi Adam,

You return false from the click handler, so the default behavior to reset is never fired. So, I guess it all depends on how you wrote the checkoutr_frm.reset function and what you expect it do.

Cheers,

Imar

adamhw · August 5th, 2010, 05:08 PM

Hi Imar

that explains something - there is no function!

could you point me in the right direction in terms of writing that function?

thanks

Adam

Old Pedant · August 5th, 2010, 05:28 PM

Code:

<input type="image" 
       src="http://p2p.wrox.com/images/btn_clearnumbers.png"
       onclick="this.form.reset();return false;" />

You can't user src= when you use <input type=reset>!

If you want an image button, then you must use type="image"

You *could* call reset as you were doing (the function *is* built in, as part of the standard <form> object), but using the code I show means you don't need to know the name of the <form>.

You *DO* need the return false because by default an image button will automatically submit the <form>! You must do the return false to suppress the submit.

You fooled Imar by using <input type=reset> when you really wanted type=image.

adamhw · August 5th, 2010, 05:42 PM

thanks Old Pedant but it still doesn't seem to clear the form, it just submits it; I've tried using:

<input type="submit" name="submit" id="btnSubmit3" border="0" value="" class="frm_clear" onMouseOver="this.style.cursor='pointer';" onclick="document.this.form.reset();return false;"/>

and

<input type="image" src="images/btn_clearnumbers.png" onclick="document.this.form.reset();return false;" />

and they both submit the form.

any ideas?

thanks

Adam

Old Pedant · August 5th, 2010, 07:04 PM

*READ* what I wrote!

Code:

<input type="image" 
       src="http://p2p.wrox.com/images/btn_clearnumbers.png"
       onclick="this.form.reset();return false;" />

Do you see the word "document" anywhere in there???

The expression document.this that you used is *meaningless* and will have a null value. Meaning that then you have a JavaScript error and so your JS code is IGNORED and indeed the submit takes place.

I have no idea why you would want to use <input type="submit" ...> as a RESET button. If you want to just use a button, simply do

Code:

    <input type="reset" value="Clear the form" />

and *NOTHING ELSE*.

The ONLY reason to explicitly call the reset( ) method is because you want to use something *other* than a standard reset button.

Imar · August 6th, 2010, 02:31 AM

Quote:

You fooled Imar by using <input type=reset> when you really wanted type=image

Indeed. I read this on my mobile phone in GMail and overlooked the last dot in the function call. Thought it was checkoutr_frm_reset() instead ;-)

Didn't check again when I wrote my reply.

Imar

adamhw · August 6th, 2010, 06:24 AM

Sorry about that Old Pedant - was getting late last night :)

I did try your suggestion but it still didn't want to reset the values

<input type="image" src="images/btn_clearnumbers.png" onclick="this.form.reset();return false;" />

I need to use this method because I'm wanting to use an image button rather than a standard reset button.

Any clues?

thanks

Adam

Old Pedant · August 6th, 2010, 03:53 PM

Worked for me.

Did you make sure that your <input> was *BETWEEN* your <form> and </form> tags??

If it is not, then "this.form" is meaningless.

adamhw · August 6th, 2010, 04:56 PM

Thanks Old Pedant

I got there in the end with a combination of javascript and asp - thanks for all your input and yours Imar.