Twitter的引导模式窗体提交(Twitter Bootstrap Modal Form Subm

我最近一直在摆弄周围与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:

更新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示例

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:

老，但也许有用，让读者对如何使用模式的一个完整的例子。

我喜欢下面的（工作示例的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:

简单

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