CODEWITHSUNDEEP
javascriptjqueryajaxdjangoforms
PANDA Stack
PANDA Stack

Reputation: 1363

form.serialize() sends empty object - Django forms

My AJAX query sends an empty object Object { } on button click - it should be sending form data.

I have a form with checkboxes. It renders and functions, and the HTML is like this:

<form method="post" action="" data-id="filter-form">

//This is from Django's CSRF token
<form  method="post" >
<input type='hidden' name='csrfmiddlewaretoken' value=.../>

<div class="form-group"> <div id="div_id_vacant" class="checkbox"> 
  <label for="id_vacant" class="">Is Vacant</label>
  <input type="checkbox" name="vacant" class="checkboxinput" id="id_vacant" />
</div></div>

...more of the same inputs...

</form>
</form>

<hr/>

<button id="search-btn" class="btn btn-info" data-filter-leads-url="/leads/ajax/filter">Search</button>
<button id="download-btn" class="btn btn-default" data-filter-leads-url="/leads/csv">Download</button>

I also have some JQuery stuff. It is supposed to read the form and send an AJAX request via post to a Django view. It looks like this:

{Django CSRF code here}

var searchBtn = $("#search-btn");
searchBtn.click(function () {
    var form = $("#filter-form");

    $.ajax({
        url: searchBtn.attr("data-filter-leads-url"),
        method: "POST",
        data: form.serialize(),
        dataType: 'json',
        success: function (data) {
            console.log(data)
        },
        error: function (data) {
            console.log("There was an error.");
            console.log(data.error())
        }
    });

});

I've also tried:

var formData = new FormData(form[0]);

It sends an empty object as well.

Empty object confirmed through Django view printing request.POST and a console.log(form.serlialize()) command as well as a console.log(formData) command. Can anyone help me solve this?

Upvotes: 0

Views: 590

Answers (2)

Chandra Kumar
Chandra Kumar

Reputation: 4205

Replace your code like this:

HTML:

<form method="post" action="" data-id="filter-form" id="filter-form">
//This is from Django's CSRF token
<input type='hidden' name='csrfmiddlewaretoken' value=.../>

<div class="form-group"> <div id="div_id_vacant" class="checkbox"> 
  <label for="id_vacant" class="">Is Vacant</label>
  <input type="checkbox" name="vacant" class="checkboxinput" id="id_vacant" />
</div></div>

...more of the same inputs...

</form>

<hr/>

<button id="search-btn" class="btn btn-info" data-filter-leads-url="/leads/ajax/filter">Search</button>
<button id="download-btn" class="btn btn-default" data-filter-leads-url="/leads/csv">Download</button>

jQuery:

{Django CSRF code here}

var searchBtn = $("#search-btn");
searchBtn.click(function () {
    var form = $("#filter-form");
    $.ajax({
        url: searchBtn.attr("data-filter-leads-url"),
        method: "POST",
        data: form.serialize(),
        dataType: 'json',
        success: function (data) {
            console.log(data)
        },
        error: function (data) {
            console.log("There was an error.");
            console.log(data.error())
        }
    });

});

Upvotes: 1

Hatjhie
Hatjhie

Reputation: 1365

Your form is using data-id, add id in it and try again. 

<form method="post" action="" data-id="filter-form" id='filter-form'>

Hopefully it helps.

Best Regards,

Hatjhie

Upvotes: 1

Related Questions