Django-表單輸入字段未發布

Question

我有桌子 列之一是復選框列，我希望每當復選框的“已檢查”屬性更改時都提交表單。

我還向表單添加了一個隱藏的輸入字段，因此我可以知道復選框已更改。

當確實更改了復選框狀態（使用JQuery）時，我確實設法獲得了提交的表單，但是由於某種原因，隱藏的輸入字段並未隨之發布。

視圖中request.POST中唯一的內容是csrf令牌。

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

編輯我嘗試了@bfrederi的建議。 沒有太大變化。 表單已過帳，但僅帶有csrf令牌。

<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

首先 ，您創建了多個具有相同ID的表單：

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

您可以完全放棄表單ID，並使用JQuery 類選擇器 ：

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

和

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

...訪問父窗體元素，像這樣 。 然后在正確的表單上調用Submit（如果要提供表單ID，則仍應具有唯一的ID）。

Answer 2

您可能希望引用此鏈接以了解如何處理html元素並將其通過請求對象傳遞。

Answer 3

好的，所以我采用了一種完全適合我的方法，將其發布為后代的答案:)

我要做的是創建一個要發布到的新URL，而不是發布到相同的URL。
然后，我只是在視圖中為post函數提供更多參數。

因此，對於同一視圖，這2個網址：

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

然后在頁面上，我只是發布到新創建的網址：

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

和視圖本身：

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)

感覺仍然有些破爛，但是可以用。

如果有人有更好的建議，我將很高興聽到。