Twitter bootstrap href button not working

Question

I am creating an html template for a django based application. I use twitter bootstrap API for buttons here, but one of them (cancel button) seems to work incorrectly. I link it to another page using href, but when I click on the button, it redirects to the current post page 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 the <a> element - get rid of the button, otherwise you will submit your form.

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

And Bootstrap is just a big CSS toolkit with a bit of js thrown - no APIs at all :))

EDIT: Currently, HTML semantics and appearance are well separated [although someone might argue that Bootstrap has its own hacks about this, see its use of <i> for icons].

Keeping track of your case, you wanted to use <button> to create a simple anchor, such as an embossed button. But the <button> is just a way to provide a richer <input type="submit"> into which you can embed images, for example [see All BS examples with icons next to the buttons].

Well, <input type="submit"> and <button> inside the <form> trigger the last action , i.e. send some user input to that location.

If you just need to find any URL without sending anything, you will need the anchor tag [ <a> ], which can be written as you wish, for example. with BS classes btn , btn-primary , btn-whateva .