Bootstrap阻止表单提交

Question

我一直在努力想象我们在这里发生了什么。

所以，我有超级基本形式。但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的整个内容绑定到该click事件。如果您打算让可点击选项卡也包含您希望手动处理选项卡事件的表单。

实施例。

脚本：

$('#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>