Twitter Bootstrap 模态表单提交 [英] Twitter Bootstrap Modal Form Submit

问题描述

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

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

我尝试将模态本身添加到表单中，尝试使用 HTML5 form="form_list" 甚至将表单添加到模态正文并使用一些 jquery 强制提交，但似乎没有任何效果

下面是我试图扩充到我需要的示例模式，之前编辑的 OK 按钮试图调用 jquery 函数.

解决方案

2018 年更新

您想在提交后关闭模态框吗?无论是模态框内的表单还是模态框外的表单，您都应该能够使用 jQuery ajax 提交表单.

这是一个示例，其中 模态框内的表单:

<a href="#myModal" role="button" class="btn" data-toggle="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">模态标题</h3></div><div class="modal-body"><form id="myForm" method="post"><input type="hidden" value="hello" id="myField"><button id="myFormSubmit" type="submit">提交</button></表格></div><div class="模态页脚"><button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button><button class="btn btn-primary">保存更改</button></div></div>

还有 jQuery ajax 来获取表单字段并提交..

$('#myFormSubmit').click(function(e){e.preventDefault();alert($('#myField').val());/*$.post('http://path/to/post',$('#myForm').serialize(),功能(数据，状态，xhr){//在这里做一些响应；});*/});

引导 3 示例

<小时>

引导 4 示例

I've recently been fiddling around with twitter bootstrap, using java/jboss, and i've been attempting to submit a form from a Modal interface, the form contains just a hidden field and nothing else so display etc. is unimportant.

The form is external to the modal itself, and I just can't figure out how this would be possible

i've tried adding the modal itself to the form, attempting to used HTML5 form="form_list" and even adding the form to the modal body and using some jquery to force a submit, but nothing appears to work

Below is a sample modal I was attempting to augment to what i needed, the OK button was previously editting to attempt to call jquery functions.

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

解决方案

Updated 2018

Do you want to close the modal after submit? Whether the form in inside the modal or external to it you should be able to use jQuery ajax to submit the form.

Here is an example with the form inside the modal:

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

And the jQuery ajax to get the form fields and submit it..

$('#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

这篇关于Twitter Bootstrap 模态表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！