Question

I am creating a html template for a django based app. I am using the twitter bootstrap API for buttons here, but one of them (the cancel button) doesn’t seem to be working correctly. I link it to another page using an href, but when I click on the button, it redirects to the current page’s post method. See below:

<h2>Add new Schedule:</h2>
<form class="form-horizontal" method='post'>
<table>
{% load bootstrap %}
{{ form|bootstrap }}
{% csrf_token %}
<tr>
<td></td>
<td>
<input class="btn btn-primary" type='submit' name='reset' value='Save' />
</td>
<td></td>
<td><a href='{%url head.views.edit_instance_binding binding.id %}'><button class="btn     btn-inverse" type="submit">Cancel</button></a></td>
</tr>
</table>
</form>

However, if I get rid of the button and use it as a simple href it seems to work:
<td><a href='{%url head.views.edit_instance_binding binding.id %}'>Cancel</a></td>

What’s going on here?

Answer 1

You have a <button> inside an <a> element – get rid of the button, otherwise you’ll be submitting your form.

If you want your anchor to be styled as a button, give it a btn class.

And Bootstrap is just a big set of CSS facilities with little js thrown in – no APIs at all :))

EDIT: nowadays HTML semantics and appearance are well separated [though someone may argue that Bootstrap has its hacks regarding this, see its <i>‘s use for icons].

Keeping the eye on your case, you wanted to use a <button> to style a simple anchor like an embossed button. But a <button> tag is just a way to provide a richer <input type="submit">, in which you can insert images for example [see all the BS examples with icons beside buttons].

Well, <input type="submit"> and <button> inside a <form> trigger the latter’s action, i.e. they post some data the user entered to such location.

If you just need to reach some URL without submitting anything, you need an anchor tag [<a>], which can be styled as you wish, e.g. with BS btn, btn-primary, btn-whateva classes.