Question

I have two buttons inside a form call:

<% using (Html.BeginForm()) {%>

    <input type="submit" value="Filter" />
    <input type="reset" value="Clear Filter" />

The fields in question:

        <td>
            <%:Html.TextBox("filterId", Model.IdFilter, new {style="width:100px"}) %>
        </td>
        <td>
            <%:Html.TextBox("filterTitle", Model.TitleFilter, new {style="width:500px"}) %>
        </td>
        <td>
            <%:Html.TextBox("filterStatus", Model.StatusFilter, new {style="width:100px"}) %>
        </td>

The first button calls the form action. The second button should either:

1. Clear the form and not post
2. Redirect to another action

Not sure why I’m having so much trouble with this, but it seems like there should be a very simple way to do this. However, all the solutions I’ve come across seem way too complicated for this.

Am I missing something?

EDIT: Here’s the solution:

Change the reset button to a plain jane button with an id:

<input type="button" value="Clear Filter" id="clearFilter" />

Then add this script:

    $(function () {
        $("#clearFilter").click(function () {
            $(':input', '#form0')
                .not(':button, :submit, :reset, :hidden')
                .val('');
            $('#form0').submit();
        });
    })

Answer 1

You may have to write custom script to get the behavior you want. It is a reset button, after all, not a clear button.

At this point, if you change the values of the controls, then click the rest button, the form will be returned to its original state, of the state of whatever the model was when it was rendered.