Bootstrap 模态框内的表单

Question

我有一个用于注册产品的弹出框，我希望在不离开弹出框的情况下提交表单。

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<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 method="post">
        <button 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>

- Max

---

您可以使用Ajax的POST请求。请提供一些示例代码。 - PinnyM

http://jsfiddle.net/L3m9Q/29/ - Max

你正在使用jQuery或其他JavaScript库吗？ - PinnyM

提交后，模态框需要保持打开状态。 - Max

Answer 1

在我的情况下，我只将提交按钮放在页脚中，并删除了data-dismiss。 即：

---

<div class="modal-content">
    <form id="role-form"  method="get">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>

            <h4 class="modal-title">تعديل صلاحيات المدير - {{$user->username}}</h4>
        </div>
        <div class="modal-body">

            <div class="form-group col-md-12">

                <select id="role" name="role" class="form-control">
                    <option selected disabled>الصلاحية</option>
                    <option value='1'>مدير</option>
                    <option value='2'>مشرف</option>
                </select>
            </div>

            <div class="clearfix"></div>
        </div>
        <div class="modal-footer">

            <button type="submit" class="btn btn-success" >حفظ</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">إلغاء</button>

        </div>
    </form>
</div>

- Abdelrahman Elzedy

Answer 2

首先，在您的<form>标签上设置一个id：

首先，在您的<form>标签上设置一个id：

<form id="myForm" method="post">
    ...
</form>

如果您正在使用jQuery（强烈推荐），您可以这样做：

$(function(){
    $('#myForm').on('submit', function(e){
      e.preventDefault();
      $.post('http://www.somewhere.com/path/to/post', 
         $('#myForm').serialize(), 
         function(data, status, xhr){
           // do something here with response;
         });
    });
});

- PinnyM

---

当我在我的PHP页面中获取来自$（'# myForm'）.serialize（）的值时， - Max

这将会破坏 HTML5 验证。 - Meki

@Aznim，请您详细说明一下吗？ - PinnyM

@PinnyM，很简单。HTML5有一些额外的表单字段属性，如required，Bootstrap使用额外的CSS来支持这些属性，并在正确填写表单之前禁用提交按钮。上面的代码破坏了这种验证（以及HTML5引入的任何其他验证）。 - Meki

@Aznim：明白了，更新了解决方案以在表单提交时触发而不是点击事件。 - PinnyM