모달의 입력 버튼이 외부 양식을 제출하지 않습니다.

Question

Django로 인라인 formset을 만들었습니다. 양식을 작성하고 사용자가 Submit을 클릭하면 알림을 팝업하는 부트 스트랩 모달을 코딩했습니다. 모달의 바닥 글에는 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를 ID로 <form> 요소를 id 속성을 사용하고 호출 할 수 있다는 것을 발견 부트 스트랩 모달. 관련 업데이트 된 코드는 다음과 같습니다.

<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를 사용하는 다른 사람들에게 도움이되기를 바랍니다.