javascript - Bootstrap 阻止表单提交

Question

我一直在努力弄清楚这里发生了什么。

所以，我有 super 基本的形式。但 bootstrap 阻止它提交。都没有

<button value="submit" type="submit">也不 <input type="submit" value="Save" class="btn btn-primary"/>作品。一旦我禁用 Bootstrap ，表单就会提交。

似乎是一个奇怪的 e.preventDefault 触发。但为什么？没看懂...

我的表格:

<div class="well page active" id="personalInfo" data-toggle="tab">
<form class="form-horizontal" method="post" action="test/save">
    <fieldset>
        <div class="form-group">
            <label for="surname" class="col-md-2 control-label">surname</label>
            <div class="col-md-10">
                <input type="text" class="form-control" id="surname" name="surname" value="">
            </div>
        </div>
        <div class="form-group">
                <button value="submit" type="submit" class="btn btn-primary">Save</button>
        </div>
    </fieldset>
<input type="hidden" name="_csrf" value="c9e458bf-6565-4b8d-bba7-6516af8e1be9">
</form>
</div>

这是堆栈跟踪以及阻止它的原因:

Answer 1

因为

data-toggle="tab"

在父div上。 Bootstrap 将 div 的整个内容与该点击事件联系起来。如果您打算让可点击选项卡也包含表单，您将需要手动处理选项卡事件。

例如。

脚本:

$('#personalInfo a').click(function (e) {
   e.preventDefault()
   $(this).tab('show')
});

HTML:

<div class="well page active" id="personalInfo">
<a href='#'>Tab</a>
<form class="form-horizontal" method="post" action="test/save">
<fieldset>
    <div class="form-group">
        <label for="surname" class="col-md-2 control-label">surname</label>
        <div class="col-md-10">
            <input type="text" class="form-control" id="surname" name="surname" value="">
        </div>
    </div>
    <div class="form-group">
            <button value="submit" type="submit" class="btn btn-primary">Save</button>
    </div>
</fieldset>
<input type="hidden" name="_csrf" value="c9e458bf-6565-4b8d-bba7-6516af8e1be9">
</form>
</div>