Twitter Bootstrap 模态表单提交

Question

我最近一直在摆弄 twitter bootstrap，使用 java/jboss，我一直在尝试从 Modal 界面提交表单，该表单只包含一个隐藏字段，没有其他内容，因此显示等并不重要.

表单在模态本身之外，我只是不知道这怎么可能

我尝试将模态本身添加到表单中，尝试使用 HTML5 form="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

2018 年更新

您想在提交后关闭模态框吗？无论是模态内部还是外部的表单，您都应该能够使用 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;
         });
      */
});

Bootstrap 3 example

---

Bootstrap 4 example

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>

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

Answer 3

简单

<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" onclick="event.preventDefault();document.getElementById('your-form').submit();">Save changes</button>

Answer 4

旧的，但对于如何使用模态的完整示例可能对读者有用。

我喜欢关注（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 5

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