Twitter Bootstrap模式表单提交

我最近一直在使用twitter引导程序摆弄，使用java / jboss，我一直在尝试从Modal界面提交表单，表单只包含一个隐藏字段而没有其他任何显示等等都不重要。

表单是模态本身的外部，我无法弄清楚这是如何实现的

我尝试将模态本身添加到表单中，尝试使用HTML5 form =“form_list”，甚至将表单添加到模态体并使用一些jquery强制提交，但似乎没有任何工作

下面是我试图增加到我需要的示例模态，OK按钮之前编辑试图调用jquery函数。

 
 × 
Delete Confirmation
 
 
 
Are you sure you want to delete the user?
 
"); 
 Cancel Ok 
  

Answer 1

2018年更新

你想在提交后关闭模态吗？ 无论是在模态内部还是外部模式，您都应该能够使用jQuery ajax来提交表单。

以下是模态内部表单的示例：

 Launch demo modal 
 
 × 
Modal header
 
 
 
  Submit 
 
 
 Close Save changes 
  

和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; }); */ }); 

Bootstrap 3示例

---

Bootstrap 4示例

Answer 2

这个答案很晚，但无论如何我都在发帖，希望能帮助别人。 像你一样，我也很难提交一个超出我的bootstrap模式的表单，而且我不想使用ajax，因为我想要加载一个全新的页面，而不仅仅是当前页面的一部分。 经过多次试验和错误后，这个jQuery对我有用：

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

为了完成这项工作，我在模态页脚中完成了这项工作

 
 Close Save changes  

注意添加到odom-submit类。 当然，您可以根据自己的具体情况命名。

Answer 3

旧的，但也许对于读者来说有一个如何使用模态的完整示例。

我喜欢以下（ 工作示例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 ，它允许在基本使用bootstrap 3模态时更快。

Answer 4

您还可以通过隐藏表单上的提交按钮并在单击模式按钮时触发它来以某种方式作弊。

Answer 5

简单

 
 Close Save changes