How do I stop this.form.reset() from firing my form action?

Question

Okay here is my issue. I am using custom graphics for my submit/reset form buttons, but as soon as you press reset the form action is committed and I do not want that to happen and I have been searching the internet for a answer without any luck. I am including the form code as well in hopes as I might of just missed something.

<form class="contact" name="con_form" action="../includes/mailer.php">
            First Name*: <input type="text" name="first_name" value="" /><br />
            Last Name*: <input type="text name="last_name" value="" /><br />
            Contact Number*: (<input type="text" name="area_code" value="" size="3" />) <input type="text" name="first_three" value="" size="3" /> <input type="text" name="last_four" value="" size="4" /><br />
            Email Address*: <input type="text" name="email" value="" /><br />
            I would like to*: 
            <select>
                <option>--- Select One ---</option>
                <option>Comment</option>
                <option>Suggestion</option>
                <option>Inquiry for employment</option>
            </select><br />
            Comment or Suggestion: <textarea size="1024"></textarea><br /><br />
            <input type="image" src="images/sub_idle.gif" onsubmit="../index.php" alt="Submit" /> <input type="image" onclick="this.form.reset()" src="images/res_idle.gif" alt="Reset" />
        </form>

This should help : http://stackoverflow.com/questions/1994509/using-image-as-reset-button — Richard A, May 07 '12 at 21:06

score 1 · Answer 1 · answered May 07 '12 at 21:06

1

input type="image" defines the image as a submit button. If you just want it to be a clickable image that triggers some javascript, there's no need to make it an input at all.

answered May 07 '12 at 21:06

Jacob Mattison

50,258
9
107
126

score 1 · Answer 2 · answered May 07 '12 at 21:07

1

the <input type="image" input is actually a submit button

I would try this as a starting point: (not the best way probably)

<img onclick="this.form.reset();" src="images/res_idle.gif" alt="Reset" />

answered May 07 '12 at 21:07

Eran Medan

44,555
61
184
276

score 0 · Answer 3 · answered May 07 '12 at 21:11

Don't use input type=image, use an A-tag with a CSS background.

<a href="#" class="buttonImage" onclick="document.con_form.reset();return false"></a>

.buttonImage {
    background-image:url(/images/sub_idle.gif);
    height:20px;
    width:60px;
    display:block
}

score 0 · Answer 4 · answered May 07 '12 at 21:22

0

You can change the type to "button" and apply a css class to the button to customize the button.

<input type="button" onclick="this.form.reset()" class="resetbutton" />

answered May 07 '12 at 21:22

Ricardo Nuñez

989
1
13
17

How do I stop this.form.reset() from firing my form action?

4 Answers4