Twitter Bootstrap模态表单提交

问题描述

我最近一直在使用java / jboss来处理twitter引导，我一直试图从一个Modal接口提交一个表单，表单只包含一个隐藏字段而没有其他东西，所以显示等是不重要的。

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

我尝试将模式本身添加到表单中，尝试使用HTML5 form =form_list，甚至将表单添加到模式主体并使用一些jquery强制提交，但没有任何内容可以工作

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

下面是我试图增加我需要的示例模式，OK按钮之前是编辑尝试调用jquery函数的。

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>

推荐答案

你想在提交后关闭模式吗？无论是模态内部还是外部模式，你都应该可以使用jQuery ajax来提交表单。

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>

以及jquery ajax获取表单字段并提交它。

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

使用Bootply：

Working on Bootply: http://bootply.com/59864

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