CODEWITHSUNDEEP
javascriptjquerypythondjangoforms
DeepSpace
DeepSpace

Reputation: 81654

Django - a form input field doesn't get posted

I have a table. One of the columns is a checkbox column, and I want the form to be submitted whenever a checkbox's "checked" attribute is changed.

I've also added an hidden input field to the form, so I can tell what checkbox has changed.

I did manage to get the form to submit when a checkbox status is changed (with JQuery), but for some reason the hidden input field is not posted along.

The only thing in request.POST in the view is the 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 suggestion. Didn't change much. The form is posted but only with the 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();
    });
});

Upvotes: 0

Views: 1007

Answers (3)

DeepSpace
DeepSpace

Reputation: 81654

Ok, so I went with a totally different approach that works for me, posting as an answer for future generations :)

What I did was to create a new url to post to, instead of posting to the same url.
Then I simply provide more parameters to the post function in my view.

So the 2 urls for the same view:

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

Then on the page I simply post to the newly created 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>

And the view itself:

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)

It still feels like a bit of a hack, but it works.

If anyone has a better suggestion I'd be glad to hear it.

Upvotes: 0

rkatkam
rkatkam

Reputation: 2794

You might want to refer this link to understand how html elements are processed and passed through the request object.

Upvotes: 0

frederix
frederix

Reputation: 1852

First, you have created multiple forms with the same id:

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

You can forgo form ids entirely and use a JQuery class selector:

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

and

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

...to access the parent form element like so. Then call submit on the correct form (you should still have unique ids if you are giving your forms id's).

Upvotes: 1

Related Questions