Why does IE submit a POST request when I click <a><button/></a>?

Question

I've got a form that looks like this:

<form method="post">
    {% csrf_token %}
    <table>
        {% for field in form %}
            {% partial "partials/field.html" field=field %}
        {% endfor %}
        <tr>
            <td></td>
            <td>
                <input name="save" type="submit" value="{% if is_new_entry %}Save{% else %}Update{% endif %}" class="submit" />
                {% if not is_new_entry %}
                    <input name="delete" type="submit" value="Delete" class="submit" />
                {% endif %}
                <a style="text-decoration:none" href="{% url dealership-entry %}"><button class="submit">New</button></a>
            </td>
        </tr>
    </table>
</form>

I want that "New" button just to submit a GET request back to that href. This works fine in FF (albeit it puts a stupid underline behind the button which I had to hide), but in IE it actually submits the form!

What's the easiest way to do what I want? I was thinking about closing off the form, then putting a new form with just the one "New" button and put the "href" in the action instead, but I don't think that'd be valid XHTML anymore, because the </form> needs to go after </table>.

I don't want to use JavaScript.

Answer 1

Is this even valid? to put a button inside a link? A button should post or get depending on what the form does.

Here you have

<form method="post">

so it will post.

Maybe use something like jquery to create a link to post?

should be:

<form action="postform.php" method="post">

I believe you're not suppose to style buttons as this is an OS styling thing.

Answer 2

your method is post, would that have anything to do with it? i might be reading u wrong

All browsers seem to submit a form when a button with a submit class with it

Answer 3

Always specify the type attribute for the button. The default type for Internet Explorer is "button", while in other browsers (and in the W3C specification) it is "submit".

Answer 4

A button is not just a 'stylistic' object, but also a functional one.

What you appear to need is an anchor tag (A) styled to appear to be a button. You can do that with CSS alone, and very convincingly with CSS+Images for button states.

The button tag inside the anchor tag is fairly nonstandard (and may be technically invalid), so that's why you aren't getting consistent behavior.

Answer 5

My present solution is to make the "New" button into an actual <input type=submit> button and handle it with a redirect on the backend, rather than fighting with the HTML and validity.