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:
- Clear the form and not post
- 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();
});
})