Bouton d'entrée dans modal ne pas soumettre de formulaire externe

Question

J'ai créé un formset en ligne avec Django. Une fois le formulaire rempli et l'utilisateur clique sur Submit, j'ai codé dans un modal Bootstrap qui affiche un rappel. Le pied de page du modal contient une entrée HTML afin que le formulaire externe puisse être soumis depuis le modal. Le problème que j'ai est que les boutons d'envoi ne soumettent pas le formulaire afin qu'il puisse être enregistré dans la base de données et envoyé par courrier électronique. Y at-il un moyen d'accomplir cela en utilisant un modal?

Modèle:

{% 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

Après avoir étudié l'élément d'entrée HTML, je trouve que vous pouvez utiliser l'attribut id pour id l'élément <form> et appeler l'id en utilisant l'attribut form dans l'élément <input> qui est codé en le Bootstrap Modal. Le code mis à jour pertinent est ci-dessous.

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

Espérons que cela aidera d'autres utilisateurs du SO comme outil de recherche.