ブートストラップがフォームの送信を妨げる

Question

私はここで何が起こっているのか把握するのに苦労しています。

私は超基本形を持っています。しかし、ブートストラップはそれが提出するのを妨げます。いずれも

<button value="submit" type="submit"> でも <input type="submit" value="Save" class="btn btn-primary"/>でもありません。ブートストラップを無効にすると、フォームが送信されます。

トリガーになると思われます。しかし、なぜ？これは

<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。ブートストラップはdivの全コンテンツをそのクリックイベントに結び付けています。クリック可能なタブにフォームも含めたい場合は、タブイベントを手動で処理する必要があります。

Ex。

スクリプト：

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