javascript - Django - 表单输入字段未发布

Question

我有一张 table 。其中一列是复选框列，我希望每当复选框的“checked”属性发生更改时就提交表单。

我还在表单中添加了一个隐藏的输入字段，这样我就可以知道哪些复选框已更改。

当复选框状态更改(使用 JQuery)时，我确实设法提交表单，但由于某种原因，隐藏的输入字段没有一起发布。

View 中 request.POST 中唯一的内容是 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>

编辑我尝试了@bfrederi的建议。没有太大改变。表单已发布，但仅使用 csrf token 。

<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 class selector :

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

和

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

...访问父表​​单元素 like so 。然后在正确的表单上调用提交(如果您提供表单 ID，您应该仍然拥有唯一的 ID)。