Django - ein Formular Eingabefeld wird nicht gebucht

Question

Ich habe eine Tabelle. Eine der Spalten ist eine Ankreuzfeldspalte, und ich möchte, dass das Formular gesendet wird, wenn das Kontrollkästchen "Checked" eines Kontrollkästchens geändert wird.

Ich habe dem Formular auch ein ausgeblendetes Eingabefeld hinzugefügt, damit ich feststellen kann, welches Kontrollkästchen sich geändert hat.

Ich habe es geschafft, das Formular zu erhalten, wenn ein Checkbox-Status geändert wird (mit JQuery), aber aus irgendeinem Grund wird das versteckte Eingabefeld nicht mitgeschickt.

Das einzige Ding in request.POST in der Ansicht ist das csrf-Token.

<table class="bordered striped centered responsive-table"> 
      <thead> 
       <tr> 
        <th data-field="season">Season</th> 
        <th data-field="episode">Episode</th> 
        <th data-field="title">Title</th> 
        <th data-field="date">Air Date</th> 
        <th data-field="watched">Watched</th> 
       </tr> 
      </thead> 
      <tbody> 
       {% for episode in episodes %} 
        <tr> 
         <td>{{ episode.season }}</td> 
         <td>{{ episode.number }}</td> 
         <td>{{ episode.title }}</td> 
         <td>{{ episode.date }}</td> 
         <td><form id='episodes' action="" method="post" enctype="multipart/form-data"> 
          {% csrf_token %} 
          <input type="hidden" id="episode_title" value="{{ episode.title }}"/> 
          <input type="checkbox" id="{{ episode.title }}" {% if episode.watched %}checked="checked" {% endif %}/> 
          <label for="{{ episode.title }}"></label> 
          </form> 
         </td> 
        </tr> 
       {% endfor %} 
      </tbody> 
     </table> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#episodes").on("change", "input:checkbox", function(){ 
     $("#episodes").submit(); 
    }); 
}); 
</script> 

EDIT I Tried @bfrederi ‚s Vorschlag. Hat sich nicht viel geändert. Das Formular wird nur mit dem csrf-Token gepostet.

<td><form id='episodes-{{ episode.title }}' action="" method="post" enctype="multipart/form-data"> 
         {% csrf_token %} 
         <input type="hidden" id="episode_title" value="{{ episode.title }}"/> 
         <input type="checkbox" class="episode-check" id="{{ episode.title }}" {% if episode.watched %}checked="checked" {% endif %}/> 
         <label for="{{ episode.title }}"></label> 
         </form></td> 

. 
. 

$(document).ready(function(){ 
    $(".episode-check").change(function() { 
     this.closest('form').submit(); 
    }); 
}); 

Answer 1

Ok, also ging ich mit einem ganz anderen Ansatz, der für mich arbeitet, als eine Antwort für zukünftige Generationen Posting :)

Was ich tat, war eine neue URL zu erstellen, um es zu, anstatt zu der der Entsendung gleiche URL
Dann biete ich einfach nur mehr Parameter für die Post-Funktion aus meiner Sicht.

So sind die 2 Urls für die gleiche Ansicht:

url(r'^show/(?P<show_name>.+)/episodes', ShowDetail.as_view(), name='show-detail'), 
url(r'^show/(?P<show_name>.+)-(?P<episode_season>\d+)-(?P<episode_number>\d+)', 
    ShowDetail.as_view(), name='show-detail-update') 

dann auf der Seite poste ich einfach in die neu geschaffene url:

<td><form id='episodes-{{ episode.title }}' action="{% url 'shows_app:show-detail-update' show_name episode.season episode.number %}" method="post"> 
          {% csrf_token %} 
          <input type="checkbox" class="episode-check" id="{{ episode.title }}" {% if episode.watched %}checked="checked" {% endif %}/> 
          <label for="{{ episode.title }}"></label> 
    </form> 
</td> 

Und die Ansicht selbst:

class ShowDetail(View): 
    def get(self, request, show_name): 
     # handling the get request 

    def post(self, request, show_name, episode_season, episode_number): 
     # handling the post request 
     # referring the user the the same page 
     return self.get(request, show_name) 

Es fühlt sich immer noch an wie ein Hack, aber es funktioniert.

Wenn jemand einen besseren Vorschlag hat, würde ich mich freuen, es zu hören.

Answer 2

Erste, haben Sie mehrere Formulare mit derselben ID erstellt:

<form id='episodes' action="" method="post" enctype="multipart/form-data"> 

Sie bilden ids verzichten kann vollständig und verwenden Sie einen JQuery class selector:

<input type="checkbox" class="episode-check" {% if episode.watched %}checked="checked" {% endif %}/> 

und

$(".episode-check").change(function() { 
    this.closest('form').submit(); 
} 

... um auf das übergeordnete Formularelement zuzugreifen like so. Rufen Sie dann submit auf dem richtigen Formular auf (Sie sollten immer noch eindeutige IDs haben, wenn Sie Ihre Formular-IDs angeben).

Answer 3

Sie könnten auf this link verweisen, um zu verstehen, wie HTML-Elemente verarbeitet und durch das Anfrageobjekt übergeben werden.