CODEWITHSUNDEEP
htmlformsbutton
Daniel
Daniel

Reputation: 35734

html: using buttons in forms witout action

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

Upvotes: 0

Views: 94

Answers (3)

kiranvj
kiranvj

Reputation: 34147

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>

Upvotes: 1

SwiftD
SwiftD

Reputation: 6079

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

Upvotes: 1

Ansel Santosa
Ansel Santosa

Reputation: 8454

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>.

Upvotes: 0

Related Questions