html: using buttons in forms witout action

Question

I'm styling links as buttons, and have noticed that the link action is overridden by the form action. So a cancel button actually updates. Is there a way to remove this behaviour easily and reliably(across all browsers) from the button, while keeping it inside the form element? Or do I need to restyle the buttons?

update:

<form>
 <input type='text'>
 <a href="cancel"><button>cancel</button></a>
 <input type="submit">
</form>

right now the a>button has the same action as input(submit)

ended up restyling and removing the button tags

Can you post an example? As far as I know, the only button that should trigger the form action is `` — Ansel Santosa, Aug 09 '12 at 17:08
There is no need for extra links and buttons in this case. That's what `` is there for. It resets your form and you can hook into the `reset` event. — Torsten Walter, Aug 09 '12 at 17:18
I just found the question asked here http://stackoverflow.com/questions/3314989/can-i-make-a-button-not-submit-a-form — Daniel, Aug 09 '12 at 17:18

score 1 · Answer 1 · answered Aug 09 '12 at 17:18

1

Sorry if I have the wrong end of the stick here but I am not entirely sure I understand your question as that cancel button shouldnt be submitting your form, you are however using buttons incorrectly which may be the source of your problem.

I think if you do it the way you are doing it they wont work in IE:

<input type="button" value="Cancel" onClick="window.location='http://www.yoursite.com/cancellink'" />

If you do them as above should do whatever you want in all browsers unless js is disabled - hope this helps Instead of linking to a page you could call any js function inther to clear form or whatever you want

answered Aug 09 '12 at 17:18

SwiftD

5,769
6
43
67

While the js being disabled is unlikely, having the button do the exact opposite when it is disabled seems too risky. – Daniel Aug 09 '12 at 17:23
I agree if that is the case but it shouldnt submit the form without js - it shouldnt do anything – SwiftD Aug 09 '12 at 17:26

score 1 · Answer 2 · answered Aug 09 '12 at 17:19

1

You need to set the type of the button, by default button act as a submit button inside a form if type attribute is not set.

<a href="cancel"><button type="button">cancel</button></a>

answered Aug 09 '12 at 17:19

kiranvj

32,342
7
71
76

why, who knows - MS engineers? how - the button doesn't do anything – Daniel Aug 09 '12 at 17:27
I always use `` to reduce confusion – Ansel Santosa Aug 09 '12 at 17:35
Seems a know issue in IE, check workaround here http://www.expertsguide.info/2010/07/button-tag-inside-anchor-not-working-in-i/ – kiranvj Aug 09 '12 at 17:37

score 0 · Accepted Answer · answered Aug 09 '12 at 17:15

0

Because of the way links work, when you click <a href="cancel">, it will try to navigate the browser to that resource. (e.g. http://yoursite.com/cancel).

If you want your button to do some JS action, remove the <a>. It's just redundant in this case. Style the <button> how you want it.

If you want your button to navigate to a page, remove the <button> and style the <a>.

answered Aug 09 '12 at 17:15

Ansel Santosa

8,224
1
28
39

that's what I was afraid of having to do. – Daniel Aug 09 '12 at 17:23
Is there a reason you don't want to do this? Nesting a button in a link doesn't make much sense... – Ansel Santosa Aug 09 '12 at 17:34
I was using a template for quick prototyping. Now I've gone and styled the links to not use buttons, luckily most of the links are generated using a function(anticipating that I'll be changing the styling) so It's a quick change. I'll have to go through the code and replace the instances where I used the button tags. – Daniel Aug 09 '12 at 18:04

html: using buttons in forms witout action

3 Answers3