Auto-filling a form with the selected 'id' in Django using JavaScript or AJAX

Question

Auto-filling a form with the selected 'id' in Django using JavaScript or AJAX

I am a novice and I want the form to be autofilled when I select a vehicle ID from the template. Here are my models.

class Fuel(models.Model):
vehicle = models.ForeignKey(Vehicle, on_delete=models.CASCADE)
previous_km = models.IntegerField(blank=False, null=False)
progressive_km = models.IntegerField(blank=False, null=False)

When I choose a vehicle, the corresponding vehicle's previous_km is automatically populated in the form. I have manually written a simple JavaScript code for this but I wish to fetch it from the database.

<script>
let usersData = [
    {
        id: 1,
        email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef9adeaf88828e8683c18c8082">[email protected]</a>",
        fname: "fname-1",
        lname: "lname-1",
        previous_km : 1000,
    },
    {
        id: 2,
        email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10652250777d71797c3e737f7d">[email protected]</a>",
        fname: "fname-2",
        lname: "lname-2",
        previous_km : 2000,
    },

];
document.getElementById('vehicle').onchange = (e) => {
    let selectedUser = usersData.find(userdata => userdata.id == e.target.value);
    console.log(selectedUser);
    document.getElementById('previous_km').value = selectedUser.previous_km;

};

javascript django ajax forms autocomplete

Answer 1

Answer №1

This is my typical approach, utilizing JQuery + Ajax for handling the submission process.

Javascript (JQuery)

$(document).ready(function() {
    $("#vehicle").change(function(){
        if ($(this).val() == ''){
            // value is blank, do not proceed with posting
            return;
        };

        postdata = {
            'vehicle_pk': $(this).val(),

            // token for authentication when logged in
            'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val(),
            //  This needs to be in template: {% csrf_token %}
        };

            
        $.ajax({
            method: 'post',
            url: 'url_to_view', // insert your URL here
            data: data,
            beforeSend: function(){
              $('#ajaxSendingDiv').fadeIn().attr({'reload':1});
            },
            success: function(data){
                console.log(data);
                if (data['status']){
                    $('#previous_km').val(data['previous_km']);
                    // perform action
                }else{
                    alert(data['msg']);
                };
            },
            error: function(event,xhr,settings,errorText){
                //xhr.status general meanings:
                // 0    = Server didn't Reply (server down)
                // 400  = Bad Request         (Syntax Error)
                // 403  = Forbidden           (Login Token Expired)
                // 403  = Not Found           (Invalid Url)
                // 500  = Server Error        (Django Crash)
            },
        });
    });
};

View.py (general)

def GetPrevKM(request):
    if request.method == 'POST':
        data = {'status':False}

        # perform query and retrieve data..
        #   Not completely sure about your model setup
        #       but this is the basic format
        obj = Fuel.objects.filter(pk=request.POST.get('vehicle_pk'))
        if obj:
            data['status'] = True
            data['previous_km'] = obj.previous_km
            data['progressive_km'] = obj.progressive_km
            data['msg'] = 'Returned Fuel Information'
        else:
            data['msg'] = 'No Fuel found on row: {0}'.format(request.POST.get('vehicle_pk'))

        import json
        return HttpResponse(
            json.dumps(data),
            content_type="application/json"
        )

    # Post only View!
    from django.http import Http404
    raise Http404

I suggest exploring JQuery further as it can greatly enhance productivity (in my opinion) and is widely utilized for tasks like this.

Answer 2

This is my typical approach, utilizing JQuery + Ajax for handling the submission process.

Javascript (JQuery)

$(document).ready(function() {
    $("#vehicle").change(function(){
        if ($(this).val() == ''){
            // value is blank, do not proceed with posting
            return;
        };

        postdata = {
            'vehicle_pk': $(this).val(),

            // token for authentication when logged in
            'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val(),
            //  This needs to be in template: {% csrf_token %}
        };

            
        $.ajax({
            method: 'post',
            url: 'url_to_view', // insert your URL here
            data: data,
            beforeSend: function(){
              $('#ajaxSendingDiv').fadeIn().attr({'reload':1});
            },
            success: function(data){
                console.log(data);
                if (data['status']){
                    $('#previous_km').val(data['previous_km']);
                    // perform action
                }else{
                    alert(data['msg']);
                };
            },
            error: function(event,xhr,settings,errorText){
                //xhr.status general meanings:
                // 0    = Server didn't Reply (server down)
                // 400  = Bad Request         (Syntax Error)
                // 403  = Forbidden           (Login Token Expired)
                // 403  = Not Found           (Invalid Url)
                // 500  = Server Error        (Django Crash)
            },
        });
    });
};

View.py (general)

def GetPrevKM(request):
    if request.method == 'POST':
        data = {'status':False}

        # perform query and retrieve data..
        #   Not completely sure about your model setup
        #       but this is the basic format
        obj = Fuel.objects.filter(pk=request.POST.get('vehicle_pk'))
        if obj:
            data['status'] = True
            data['previous_km'] = obj.previous_km
            data['progressive_km'] = obj.progressive_km
            data['msg'] = 'Returned Fuel Information'
        else:
            data['msg'] = 'No Fuel found on row: {0}'.format(request.POST.get('vehicle_pk'))

        import json
        return HttpResponse(
            json.dumps(data),
            content_type="application/json"
        )

    # Post only View!
    from django.http import Http404
    raise Http404

I suggest exploring JQuery further as it can greatly enhance productivity (in my opinion) and is widely utilized for tasks like this.

Auto-filling a form with the selected 'id' in Django using JavaScript or AJAX

Answer №1

Javascript (JQuery)

View.py (general)

Similar questions

Divide the sentence using unique symbols to break it into individual words, while also maintaining

What is the best way to send information to a component using Props in Vue2?

What methods are available for retrieving specific XML entries using JavaScript?

Guide to verify the user selection within a select form

Sockets causing a blockage in the Express server

Display the text area when the "Yes" radio button is clicked, while it remains hidden either by default or when the "No" radio button is selected

Displaying search results in various Angular components

Emphasizing the date variable within a spreadsheet

switch between showing and hiding dynamic table rows

What is causing the sorting table to fail in React when using useState?

Tips for adjusting column sizes in ag-grid

The coordinates of the event do not match the coordinates of the location. Successful AJAX response data

What is the best way to import a TypeScript file in index.js?

Unable to establish a connection with Metamask

What is the best way to access attributes from a div element?

The process of passing $refs in Vue explained

What is the reason for Jest attempting to resolve all components in my index.ts file?

"Enhancing User Experience with AngularJS by Dynamically Modifying and Refresh

Real-time functionality is not supported by Firebase functions

The resolution of Angular 8 resolver remains unresolved