How to autofill form based on the selected 'id' using javascript or ajax in django

pzoloc tech 0
Viewed 25

I am new ,i want to autofill form when i select vehicle id from template .hre is 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 select vehicle then corresponding vehicle previous_km automatically filled in form. here a write simple javascript code manually but i want to take from database.

<script>
let usersData = [
    {
        id: 1,
        email: "u1@gmail.com",
        fname: "fname-1",
        lname: "lname-1",
        previous_km : 1000,
    },
    {
        id: 2,
        email: "u2@gmail.com",
        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;

};
autocomplete ajax forms django javascript
1 Answers

This is generally what I would do. It uses JQuery + Ajax to handle the posting.

Javascript (JQuery)

$(document).ready(function() {
    $("#vehicle").change(function(){
        if ($(this).val() == ''){
            // value is blank, don't post
            return;
        };

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

            // token if being logged in is required
            'csrfmiddlewaretoken': $('[name=csrfmiddlewaretoken]').val(),
            //  This needs to be in template: {% csrf_token %}
        };

            
        $.ajax({
            method: 'post',
            url: 'url_to_view', // put 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']);
                    // do thing
                }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.oy (general)

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

        # do your query + return the data..
        #   I'm not 100% on how your models are set up
        #       but this is the general 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

and I recommend trying to use JQuery more, you can get a lot more done quicker (imo) and it seems like a lot of people use it for things like this

Nealium0
Related