20

我最近一直在摆弄 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>
4

5 回答 5

30

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

引导程序 3 示例

引导程序 4 示例

于 2013-04-24T15:01:29.937 回答
22

这个答案很晚，但无论如何我都会发布，希望它会对某人有所帮助。像你一样，我也很难提交超出我的引导模式的表单，我不想使用 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 类的添加。当然，您可以根据您的具体情况为其命名。

于 2015-07-31T22:25:24.017 回答
5

简单的

<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>

于 2018-06-25T08:45:34.570 回答
2

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

我喜欢以下（工作示例 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 模态时更快。

于 2015-12-31T11:01:13.647 回答
0

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

于 2016-05-25T09:15:02.210 回答