jQuery POST not returning variable users

Question

I am trying to post the values of checked boxes, but unable to do so. It first collects all the checked boxes in an array (selected_users-which is working fine upon testing it with alert function )and then sends them collectively. But I'm not able to post the data. The error that I get is Key 'users' not found in . Where i'm going wrong? how do I modify my POST statement in jQuery plugin?

View.py

def get_data(request):

if request.method == 'POST': 
    selected_users = request.POST['users']
return HttpResponse(selected_users)

urls.py

urlpatterns = patterns('',
    url(r'get_data/','apps.api.views.get_data', name = 'grabhalo_get_data'),
)

jQuery

$(document).ready(function(){
                $('#submit').click(function() {
                  var selected_users = $('input[type=checkbox]:checked').map(function(_, el) {
                    return $(el).val();
                    }).get();
                    alert(selected_users);     // works fine
                    $.post("get_data/",{users:selected_users});   // not able to post
                });    
            })

Checkboxes

{% for user in users %}
    <input type="checkbox" class="check" value="{{user.id}}" />{{user.name}}<br>    
{%endfor%}

    <form id="form" method="POST" action="/get_data/">
       {% csrf_token %}
       <input type="text" class="span8 search-query" placeholder="Type here..." name="chat">
       <input type="submit" value="Send" class = "btn btn-primary" id = "submit">
   </form>

Different Suggestions are welcomed , if anyone can redefine the .post function.

Thanks

Answer 1

Why dont you try your POST like this:

$(document).ready(function(){
  $('#submit').click(function() {
      var selected_users=[];
      var $inputs = $('.check');
      $inputs.each(function() {         
            selected_users.push( $(this).val());        
        });            
                    alert(selected_users);     // works fine
      $.post("get_data/",{"users" : selected_users},function(response) 
        {
            alert(response);
        });     
            })

try this in your view.py :

if request.method == 'POST': 
selected_users = request.POST.get("selected_users", "")
return HttpResponse(selected_users)

Answer 2

Your JQuery $.post function is ok, the problem is getting the values in a Django view. You are posting an array of values - to get them you use getlist() function on POST QueryDict. So your view would look like this:

if request.method == 'POST':
    selected_users = request.POST.getlist('users[]')
    return HttpResponse(selected_users)

Please see:

QueryDict.getlist(key, default)

django - getlist()

Answer 3

You just have to combined @Aditya and @Yurly answers:

script

function get_csrf_token(){
    return $("input[name='csrfmiddlewaretoken']").val();
}

$(document).ready(function(){
    $('#submit').click(function() {
        var datas = new Array();
        var i = 0;
        var csrf_token = get_csrf_token();

        $("input[type=checkbox]:checked").each(function() {
            datas[i] = $(this).val();
            i++;
        });   

        #make sure the url is correct
        $.post("get_data/", {'users[]': datas, 'csrfmiddlewaretoken': csrf_token}, function(data){
            alert(data);
        });   
    });    
})

views.py

if request.method == 'POST':
    selected_users = request.POST.getlist('users[]')
    return HttpResponse(selected_users)

Answer 4

When you submit the form you would need to prevent the default action. Otherwise your page refreshes voiding an post from happening.

Also use serialize array to convert them into an array. Try this

$(document).ready(function(){
     $('#submit').click(function(e) {
         e.preventDefault();
         // Will only serialize the checked values by default
         var selected_users = $('input[type=checkbox]').serializeArray();
          console.log(selected_users);     
          $.post("get_data/",{'users[]':selected_users}); 
     });    
})

You can use $.ajax instead if you want to work with lot more options

$.ajax({
     url : 'get_data', 
     data : {'users[]' : selected_users},
     dataType: "set it to the type you are expecting".
     type : 'post'
}).done(function(data, status, xhr) {
   console.log(data)
}).fail(function(xhr, status, error) {
   console.log("Error status : "+ status + "-- error : " + error);
});