模态输入按钮不提交外部格式

Question

我已经用Django创建了一个内嵌模板集。一旦表格填写完毕，用户点击Submit我已经编写了Bootstrap模式，弹出提醒。模态的页脚包含HTML输入，因此可以从模式提交外部表单。

我遇到的问题是提交按钮不提交表单，因此它可以保存到数据库并通过电子邮件发送。有没有办法做到这一点使用模态？

模板：

{% extends "reports/base.html" %} 
{% load static %} 
{% block body_block %} 
<font color="green"> 
      <h4 >Company</h4> 
</font> 
<h3>Please enter your nightly reports in the form below.</h3> 
<br> 
<p>If you would like to add a new line to a category, select <font color="blue">add New Line Item</font> under each category. 
When finished, click on <strong><font color="gray">Save and Email to Corporate</font></strong> button at the bottom of the form.</h4> 
Once the form is sent, the form will refresh with the information you have entered. If you notice an error after you sent the form, edit the error and click the <strong><font color="gray">Save and Email to Corporate</font></strong> button again to update and resend.</p> 
<br> 
<h5>If you would like a blank form, click <a href="{% url 'reports:storenightlyreports' %}"><font color="green"> here</font>.</a></h5> 
<br> 
<br> 

<div class="container-fluid"> 
    <form class="form-inline" action="" method="post"> 
     {% csrf_token %} 
     {{ form }} 

     <table class="table"> 
      {{ formset_new.management_form }} 
      <div> 
      <br><h4><strong>New</strong></h4><br> 
      {% include "reports/formsets.html" with formset=formset_new formset_class_name='new' prefix="new" %} 
      </div> 
     </table> 
     <table class="table"> 
      {{ formset_renewal.management_form }} 
      <div> 
       <br><h4><strong>Renewals</strong></h4><br> 
      {% include "reports/formsets.html" with formset=formset_renewal formset_class_name='renewal' prefix="renewal" %} 
      </div> 
     </table> 
     </div> 
    </form> 
</div> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="{% static 'js/jquery.formset.js' %}"></script> 
<br> 

<div class="container"> 
    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"><strong>Submit</strong></button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Before You Submit!!</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Please review and make sure that all line items are correct and that the <strong>"Check if No New Items"</strong> is checked if there are no new items for that catagory. If all is correct, please select the <strong>Save and Email</strong> button.</p> 
     </div> 
     <div class="modal-footer"> 
      <input type="submit" class="btn btn-primary" value="Save and Email to Corporate"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 

</div> 

{% endblock %} 

Answer 1

研究HTML输入元素后，我发现，你可以在被编码的<input>元素使用form属性使用id属性标识的<form>元素，并调用ID Bootstrap模态。相关的更新代码如下。

<div class="container-fluid"> 
    <form id="formset" class="form-inline" action="" method="post"> <!--added id="formset" to the form element--> 
     {% csrf_token %} 
     {{ form }} 

     <table class="table"> 
      {{ formset_new.management_form }} 
      <div> 
      <br><h4><strong>New</strong></h4><br> 
      {% include "reports/formsets.html" with formset=formset_new formset_class_name='new' prefix="new" %} 
      </div> 
     </table> 
     <table class="table"> 
      {{ formset_renewal.management_form }} 
      <div> 
       <br><h4><strong>Renewals</strong></h4><br> 
      {% include "reports/formsets.html" with formset=formset_renewal formset_class_name='renewal' prefix="renewal" %} 
      </div> 
     </table> 
     </div> 
    </form> 
</div> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="{% static 'js/jquery.formset.js' %}"></script> 
<br> 

<div class="container"> 
    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"><strong>Submit</strong></button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Before You Submit!!</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Please review and make sure that all line items are correct and that the <strong>"Check if No New Items"</strong> is checked if there are no new items for that catagory. If all is correct, please select the <strong>Save and Email</strong> button.</p> 
     </div> 
     <div class="modal-footer"> 
      <input type="submit" form="formset" class="btn btn-primary" value="Save and Email to Corporate"><!--added form id, form="formset" , to input element--> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 

</div> 

希望这可以帮助那些使用SO作为研究工具的人。