Why is HTTP post request is made on spinner button click

Question

I am coding a MVC 5 internet application and have a question in regards to a view.

I have added a Bootstrap 3 input-spinner to my view and the code is at this resource link: http://codepen.io/Thomas-Lebeau/pen/csHqx

Here is my view code:

<div class="form-group">
    @Html.LabelFor(model => model.width, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <div class="input-group spinner">
            @Html.EditorFor(model => model.width, new { htmlAttributes = new { @class = "form-control" } })
            <div class="input-group-btn-vertical">
                <button class="btn btn-default"><i class="fa fa-caret-up"></i></button>
                <button class="btn btn-default"><i class="fa fa-caret-down"></i></button>
            </div>
            @Html.ValidationMessage("assetwidth")
        </div>
    </div>
</div>

Whenever I click on either of the up or down buttons, a [HttpPost] request is made.

Why is this? How can I prevent this from happening?

Thanks in advance.

Answer 1

Add the type attribute (depending on the browser a button element may default to type="submit"

<button type="button" class="btn btn-default">.....

Refer documentation