Wrox Programmer Forums
|
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old August 5th, 2010, 04:55 PM
Authorized User
 
Join Date: Dec 2009
Posts: 85
Thanks: 16
Thanked 0 Times in 0 Posts
Default clear form values button

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
 
Old August 5th, 2010, 04:58 PM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old August 5th, 2010, 05:08 PM
Authorized User
 
Join Date: Dec 2009
Posts: 85
Thanks: 16
Thanked 0 Times in 0 Posts
Default button reset using image

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 August 5th, 2010, 05:28 PM
Friend of Wrox
 
Join Date: Jun 2008
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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.
 
Old August 5th, 2010, 05:42 PM
Authorized User
 
Join Date: Dec 2009
Posts: 85
Thanks: 16
Thanked 0 Times in 0 Posts
Default button reset using image

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 August 5th, 2010, 07:04 PM
Friend of Wrox
 
Join Date: Jun 2008
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

*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.
 
Old August 6th, 2010, 02:31 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
 
Old August 6th, 2010, 06:24 AM
Authorized User
 
Join Date: Dec 2009
Posts: 85
Thanks: 16
Thanked 0 Times in 0 Posts
Default button reset using image

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 August 6th, 2010, 03:53 PM
Friend of Wrox
 
Join Date: Jun 2008
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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.
 
Old August 6th, 2010, 04:56 PM
Authorized User
 
Join Date: Dec 2009
Posts: 85
Thanks: 16
Thanked 0 Times in 0 Posts
Default button reset using image

Thanks Old Pedant

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





Similar Threads
Thread Thread Starter Forum Replies Last Post
How do I clear a form after it has been submitted? u2clone ASP.NET 2.0 Basics 7 February 12th, 2008 04:00 PM
How to clear all text box in a form at once time richie86 ASP.NET 1.0 and 1.1 Basics 1 October 31st, 2005 04:57 AM
How to create a "Clear Button" phudong3da Dreamweaver (all versions) 1 May 3rd, 2005 02:48 PM
When I hit save button the selected employee clear shoakat Classic ASP Databases 6 September 16th, 2004 01:41 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.