javascript - 单击调用javascript函数以隐藏输入的按钮时提交表单

Question

下面的代码示例代表了我的问题，简而言之，当我单击按钮并执行 togglehider() 时，div 中的元素确实崩溃了，但随后表单被提交，就像我单击了提交输入一样！有人可以告诉我这是为什么，以及补救措施吗？谢谢你。

@model TUTCSkeleton.ViewModels.CycleEventViewModel

@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Edit</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>CycleEvent</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(model => model.Id)

    <div class="form-group">
        @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
        </div>
    </div>

    @if (Model.CanManage)
    {
        <button onclick="togglehider()">Audit Data Visibility</button>
        <div id="togglehide">

            <div class="form-group">
                @Html.LabelFor(model => model.Modified, htmlAttributes: new {@class = "control-label col-md-2"})
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Modified, new {htmlAttributes = new {@readonly = "readonly", @class = "form-control"}})
                    @Html.ValidationMessageFor(model => model.Modified, "", new {@class = "text-danger"})
                </div>
            </div>
        </div>
    }

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn" />
        </div>
    </div>
</div>
}

<div>
@Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    <script type="text/javascript">
        function togglehider() {
            var x = document.getElementById("togglehide");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    </script>
}

标签： javascriptasp.net-mvchtmlformsrazor