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

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

和

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

...访问父表单元素like so。然后在正确的表单上调用submit（如果您提供表单ID，则仍应该有唯一ID）。

Answer 2

您可能需要引用this link来了解如何处理html元素并通过请求对象传递。

Answer 3

好的，所以我选择了一种对我有用的完全不同的方法，作为后代的答案发布：）

我所做的是创建一个新的网址发布到，而不是发布到相同的网址然后我在视图中为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')

然后在页面上我只是发布到新创建的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>

观点本身：

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)

它仍然感觉有点像黑客，但它确实有效。

如果有人有更好的建议，我会很高兴听到它。

Django - 表单输入字段未发布

3 个答案: