How to get the checked objects in django view with ajax? - django

Question

I am very new to ajax. Here I have a django form and inside the form there is a form group of checkbox.
What I want here is, from the checkbox if the user check some user object I want to get it in the django view immediately before the form submit. And if the the user uncheck this It should be removed from django view also. How can I do this ?
After form submit it works fine but I want to get the checked user before the form submits.So I think in this case ajax will be required. But I am very beginner in ajax so I got stuck here.
template
<div class="form-group">
<div class="checkbox">
<input class="checkbox1" name="users" type="checkbox" value="{{user.pk}}"
id="user{{user.pk}}"/>
<label for="user{{user.pk}}"></label>
</div>
</div>
jquery
<script>
$(function(){
var checked_lists = [];
$(".checkbox1:checked").each(function() {
checked_list.push(this.value);
});
$.ajax({
url: "{% url 'my_url' %}",
data:{
checked_Lists: checked_list,
}
}
});
});
</script>
views
print(self.request.POST.getlist('checked_lists'))

Answer 1

In you case you need to pass checked_list[] javascript list to view so need ajax
for that
and handle ajax request base on checkbox change event
<script>
$('.checkbox1').change(function(){ // checkbox1 change event
var checked_lists = [];
$(".checkbox1:checked").each(function() {
checked_list.push(this.value);
});
var formdata = new FormData();
$.ajax({
formdata.append('checked_list',checked_list)
formdata.append('csrfmiddlewaretoken',$('input[type=hidden]').val());
$.ajax({
url:"/profile_upload", //replace with you url
method:'POST',
data:formdata,
enctype: 'application/x-www-form-urlencoded',
processData:false,
contentType:false,
success:function(data){
alert("Display return data"+data)
},
error:function(error){
alert(error.error)
}
});
});
});
</script>
views.py :You define view base on your logic
def <view-name>(request):
if request.method=='POST':
user_list = request.getlist('checked_list')
return JsonResponse(status=200,data={'data':'success'})
else:
return JsonResponse(status=203,data={'error':'unauthorize request.!!'})
If you use post request to define csrf_token so pass them if your script
code in single page formdata.append('csrfmiddlewaretoken',{% csrf_token %});through those link and do
Ajax Request For Sumbit Data
if you get error on it, let me know