HTML Script Function not returning List of Checked Items

I am using Django to receive Checked Items from HTML. Then, Django will run loop on array to delete all checked items from the list. Here is my code from HTML. It seems like HTML is not returning all checked ITEMS.

SCRIPT

<script>
    function MakeCheckList(){
    var checkedList = $('input:checkbox:checked[name="checkedbox"]').map(function() { return $(this).val(); }).get();
    $('input#checklist').val(checkedList);
    };
</script>
            
<div class="row">
    <button class="taskAdd" name="taskAdd" type="submit"><i class="fa fa-plus icon"></i>Add</button>
    <button class="taskCompleted" name="taskCompleted" formnovalidate="" type="submit" onclick="MakeCheckList();"><i class="fa fa-check icon"></i>Complete</button>
    <button class="taskDelete" name="taskDelete" formnovalidate="" type="submit" onclick="MakeCheckList();"><i class="fa fa-trash-o icon"></i>Delete</button>
</div>
 <ul  class="taskList">

{% for todo in todos %} <!-- django template lang - for loop -->
<li class="taskItem">
    <input type="checkbox" class="taskCheckbox" name="checkedbox" id="{{ todo.id }}" value="{{ todo.id }}">
    <label for="{{ todo.id }}"><span class="complete-">{{ todo.title }}</span></label>
    <span class="category-{{ todo.category }}">{{ todo.category.name }}</span>
    <span class="priority-{{ todo.priority }}">{{ todo.priority.name }}</span>
    <span class="status-{{ todo.status }}" >{{ todo.status.name }}</span>
    <span class="date-{{ todo.due_date }}" >{{ todo.due_date }}</span>
    <strong class="taskDate"><i class="fa fa-calendar"></i>{{ todo.created }}</strong>
</li>
{% endfor %}

**Django Code **

        def request_post(task_type):
                todo = TodoList.objects.get(id=int(todo_id))
                return todo
        
        #checkedlist = request.POST["checkedbox"].split(',')
        checkedlist = request.POST["checklist"].split(',')
        
        for todo_id in checkedlist:

            if "taskDelete" in request.POST:
                todo = request_post("taskDelete")
                todo.delete()

            if "taskCompleted" in request.POST:
                todo = request_post("taskCompleted")
                todo.status_id = 1
                todo.save()

However as per the Traceback error in browser, it is picking up only one value from checked items.

__class__   
<class 'django.utils.datastructures.MultiValueDict'>
key 
'checklist'
self    
{'category_select': '',
 'checkedbox': '71',
 'csrfmiddlewaretoken': 'H9fvZAv0rGSlyASyrZH5YXDdk3KXusw2bFDvMnLMDhFJkY9yDL9ECzJ0cV4baHez',
 'date': '',
 'description': '',
 'priority_select': '',
 'status_select': '',
 'taskDelete': ''}

1 answer

  • answered 2021-04-01 17:07 Kevin Verstraete

    I quickly remade your sample and all seems to work fine. Except in your code onclick=MakeCheckList();" seems to be missing a " after onclick=

    function MakeCheckList(){
      var checkedList = $('input:checkbox:checked[name="checkedbox"]').map(function() { return $(this).val(); }).get();
        $('input#checklist').val(checkedList);
    };
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <body>
      <div>
        <button class="taskDelete" name="taskDelete" onclick="MakeCheckList();">Delete</button>
      </div>
      <ul>
      <li><input type="checkbox" class="taskCheckbox" name="checkedbox" value="or another 1"/></li>
      <li><input type="checkbox" class="taskCheckbox" name="checkedbox" value="or another 2" checked/></li>
      <li><input type="checkbox" class="taskCheckbox" name="checkedbox" value="or another 3"/></li>
      <li><input type="checkbox" class="taskCheckbox" name="checkedbox" value="or another 4" checked/></li>
      </ul>
      <div>
        <input id="checklist"/>
      </div>
    </body>

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum