在模态引导程序中形成 [英] Form inside the modal bootstrap

问题描述

我有一个注册产品的模式.我想在模态框内提交表单而不离开模态框.

I have a modal that makes the registration of products. I wanted to submit a form inside the modal without leaving the modal.

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

推荐答案

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

Firstly, set an id on your <form> tag:

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

如果您使用的是 jQuery(强烈推荐)，您可以这样做:

If you were using jQuery (highly recommended), you could do this:

$(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;
         });
    });
});

这篇关于在模态引导程序中形成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！