Twitter Bootstrap模式表单提交

Question

我最近一直在使用twitter引导程序摆弄,使用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示例

Bootstrap 4示例

Answer 2

这个答案很晚,但我还是发帖,希望能帮助别人.像你一样,我也很难提交一个超出我的bootstrap模式的表单,我不想使用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>