Twitter的引導模式表單提交

Question

我最近一直在與Twitter的引導擺弄周圍，用java/JBoss和我一直試圖從一個模態界面提交表單，表單只包含一個隱藏字段，並沒有別的等等顯示等不重要。

形式是外部模式本身，我只是無法弄清楚如何做到這一點是可能的

我試過添加模式本身的形式，嘗試使用HTML5的形式=「form_list 「甚至增加的形式向模體和使用一些jQuery來強行提交，但沒有什麼似乎工作

下面是一個示例模式我試圖以加強對我需要什麼，OK按鈕以前編輯工作，以試圖調用jquery函數。

<div class='modal small hide fade' id='myModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'> 
     <div class='modal-header'> 
      <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button> 
      <h3 id='myModalLabel'>Delete Confirmation</h3> 
     </div> 
     <div class='modal-body'> 
      <p class='error-text'>Are you sure you want to delete the user?</p> 
     </div>"); 
     <div class='modal-footer'> 
     <button class='btn btn-danger' data-dismiss='modal' aria-hidden='true'>Cancel</button> 
     <button class='btn btn-success' data-dismiss='modal'>Ok</button> 
     </div> 
    </div> 

Answer 1

是否要在提交後關閉模式？無論是內部模式還是外部表單，您都應該可以使用jQuery ajax來提交表單。

這裏是模態內部形式的例子：

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
     <form id="myForm" method="post"> 
      <input type="hidden" value="hello" id="myField"> 
      <button id="myFormSubmit" type="submit">Submit</button> 
     </form> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
     <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

而jQuery的Ajax獲得表單字段並提交..

$('#myFormSubmit').click(function(e){ 
     e.preventDefault(); 
     alert($('#myField').val()); 
     /* 
     $.post('http://path/to/post', 
     $('#myForm').serialize(), 
     function(data, status, xhr){ 
      // do something here with response; 
     }); 
     */ 
}); 

工作Bootply：http://bootply.com/59864

Answer 2

這個答案已經很晚了，但我仍然發帖希望它能幫助別人。和你一樣，我也有困難提交，這是我的引導模式外的形式，我不希望使用Ajax，因爲我想一個全新的頁面加載，而不僅僅是當前頁面的一部分。多試錯後，這裏是爲我工作了jQuery：

$(function() { 
    $('body').on('click', '.odom-submit', function (e) { 
     $(this.form).submit(); 
     $('#myModal').modal('hide'); 
    }); 
}); 

爲了使這一工作，我在模態頁腳這樣做

<div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary odom-submit">Save changes</button> 
</div> 

注意的除了上課的奧多姆提交。當然，您可以根據自己的具體情況命名它。

Answer 3

舊的，但也許有用的讀者有一個完整的例子如何使用模態。

我喜歡以下（working example jsfiddle）：

$('button.btn.btn-success').click(function(event) 
{ 

event.preventDefault(); 

$.post('getpostcodescript.php', $('form').serialize(), function(data, status, xhr) 
    { 
     // do something here with response; 
     console.info(data); 
     console.info(status); 
     console.info(xhr); 
    }) 
    .done(function() { 
     // do something here if done ; 
     alert("saved"); 
    }) 
    .fail(function() { 
     // do something here if there is an error ; 
     alert("error"); 
    }) 
    .always(function() { 
     // maybe the good state to close the modal 
     alert("finished"); 
     // Set a timeout to hide the element again 
     setTimeout(function(){ 
      $("#myModal").hide(); 
     }, 3000); 
    }); 
}); 

爲了應對模態更容易，我建議使用eModal，這允許更快的基本用引導3個模態的。

Answer 4

您也可以欺騙以某種方式hidding一個提交表單，並觸發其上的按鈕，當你點擊你的模式按鈕。