CODEWITHSUNDEEP
javascriptpythondjangodjango-formsdjango-templates
Ayush Srivastava
Ayush Srivastava

Reputation: 95

Select all checkboxes in django template

I am using the following code to 'select all' and 'clear' the checkboxes of my django form in the django template. 

 <form id="inv_form" method="post" action="{% url 'inventory:create_inventory' %}">
     {% csrf_token %}
     {{ form.as_p }}
     <input type="submit" name="submit" value="Create Inventory" />
     <a href="{% url 'user:dashboard' %}">Cancel</a>
     <button onclick="select_all()">Select All</button>
     <button onclick="deselect_all()">Clear</button>
  </form>

  function select_all()  {
     $('input[type=checkbox]').prop('checked', true);
  }

  function deselect_all()  {
     $('input[type=checkbox]').prop('checked', false);
  }

The problem is the form is getting automatically posted if I press 'check all' button. Same in case of 'clear' button.

So I tried adding preventDefault() to my form submit event.

  $("#inv_form").submit(function(event){
     event.preventDefault();
  });

Now the original problem has been solved, but the submit doesn't works even on clicking at all.

How to make the check all button work without auto posting the django form

Upvotes: 0

Views: 2192

Answers (2)

Jeshli
Jeshli

Reputation: 31

I found a simpler solution here. ** stack overflow: disable auto-submit on button click ** It explains that by html5 default a button is type="submit". The solution to the above problem is explained below.

<button type="button" onclick="select_all()">Select All</button>

Upvotes: 1

Milano
Milano

Reputation: 18705

You probably hate to unbind submit, then you can submit the form. 

$('some_form').unbind('submit').submit()

This approach should cancel prevenDefault so you can submit the form.

Upvotes: 0

Related Questions