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一个提交表单，并触发其上的按钮，当你点击你的模式按钮。