Ajax jQuery serialize() & serializeArray() textarea not submitting in Django form

Question

I have a form I'm trying to submit the data via AJAX & jQuery to an Django API. Submission through the Django admin works fine but through the form, the textarea field is the one cause problems. I have a similar form without the textarea and it works fine. The textarea content is not being submitted and I don't know why. Here is the form:

<form id="addMaintenanceRecordsForm" action="">
    {% csrf_token %}
    <div class="mb-3">
        <div class="row">
            <div class="col-md-12">
                <label>Title <span style="color: #dd0000;">*</span></label>
                <input type="text" class="form-control" name="maintenance_title" placeholder="Enter Title" id="mr-title" required>
            </div>
        </div>
    </div>
    <div class="mb-3">
        <div class="row">
            <div class="col-md-12">
                <label>Details <span style="color: #dd0000;">*</span></label>
                <textarea class="form-control" id="mr-summary" name="summary" placeholder="Describe the nature of maintenance repair..." rows="3" required></textarea>
            </div>
        </div>
    </div>
    <div class="mb-3">
        <div class="row">
            <div class="col-md-12">
                <label>Repair Status <span style="color: #dd0000;">*</span></label>
                <select class="form-select" name="repair_status" id="mr-status" aria-label="Default select example" placeholder="Repair Status" required>
                    <option selected disabled>Choose...</option>
                    <option value="Complete">Complete</option>
                    <option value="Ongoing">Ongoing</option>
                </select>
            </div>
        </div>
    </div>
     
    <button type="submit" class="btn btn-soft-primary btn-sm" id="mr-create">Create New Record</button>
    <button type="button" class="btn btn-soft-secondary btn-sm">Cancel</button>
</form>

This is my jQuery code

$(function() { 
        $('#addMaintenanceRecordsForm').on('submit', function(e) { 
            e.preventDefault();

            console.log($("#addMaintenanceRecordsForm").serializeArray());

            let url = "http://127.0.0.1:8000/api/maintenance/add/";

            $.ajax({
                type : 'POST',
                url : url,
                data : $("#addMaintenanceRecordsForm").serializeArray(),
                dataType: "json",
                success: function(data){
                    alert("New Maintenance Records Added!");
                    location.reload();
                },
                error:function(data){
                    alert("Maintenance Records Not Added!");
                    location.reload();
                }
            });

        });
    });

I keep getting this error:

Bad Request: /api/maintenance/add/
POST http://127.0.0.1:8000/api/maintenance/add/ 400 (Bad Request)

On the console i get this:

{
    "name": "csrfmiddlewaretoken",
    "value": "jZ7Y2WrJB67xrkP34U53ngf11cu4ju1nvzlQ29Krtqv5ehkjuami0uwvyCrFdXAs"
}
{
    "name": "maintenance_title",
    "value": "Pipe Leakages"
}
{
    "name": "summary",
    "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
{
    "name": "repair_status",
    "value": "Ongoing"
}

And the django CMD i get back a dictionary like this

<QueryDict: {'csrfmiddlewaretoken': ['LmbrIAnh7fJcAjjQ0hnEiwSujdFTJfLgXWpjINGZZz7KngO6qxETVK9YQDCuDIkl'], 'maintenance_title': ['Pipe Leakages'], 'summary': ['Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'], 'repair_status': ['Ongoing']}>

I have tried other solutions like:

data : $("#addMaintenanceRecordsForm").serialize(),

or

data : $("#addMaintenanceRecordsForm input, #addMaintenanceRecordsForm textarea").serializeArray(),

or

data : $("#addMaintenanceRecordsForm").find('input', 'select').serializeArray(),

or

$('#mr-create').on('click', function(e) { 
    e.preventDefault();

But they all don't seem to work. What could be the problem with the textarea not serializing?

Answer 1

In your code you are showing that you are printing the form to the console like this:

console.log($("#addMaintenanceRecordsForm").serializeArray());

You said that it results in an output like this:

{
    "name": "csrfmiddlewaretoken",
    "value": "jZ7Y2WrJB67xrkP34U53ngf11cu4ju1nvzlQ29Krtqv5ehkjuami0uwvyCrFdXAs"
}
{
    "name": "maintenance_title",
    "value": "Pipe Leakages"
}
{
    "name": "summary",
    "value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
{
    "name": "repair_status",
    "value": "Ongoing"
}

If it's a JSON API using Django REST you still need a similar structure to this:

{
    "csrfmiddlewaretoken": "jZ7Y2WrJB67xrkP34U53ngf11cu4ju1nvzlQ29Krtqv5ehkjuami0uwvyCrFdXAs",
    "maintenance_title": "Pipe Leakages",
    "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    "repair_status": "Ongoing"
}

The reason you are getting a 400 Bad Request is because the JSON you are sending has no key at the top level for each of those fields meaning Django REST can't find them.

I'd suggest maybe looking into what serializerArray actually does as it might not be what you are looking for.

Instead I'd suggest maybe constructing the the JSON object in the JavaScript using the value from each field of the form, like:

{
   "maintenance_title": $("#mr-title").value(),
   "repair_status": $("#mr-status").value()
}

Or perhaps try using the ".serialize()" again to see what it prints to the console then. The fact you are getting a Bad Request and it's saying all fields are missing means it's not just happening with the Textarea.

To test, construct your own object in Postman thats similar to what I have and see if the errors go away.