Python, Django, HTMX, is it possible to save data, when a user clicks <button>

When a user click <button> on index page, can save data immediately?

views.py

def index(request):
    ...
    ...
    context = { ... }
    response = render(request, 'docu/index.html', context)

    ### Save visitors' IP and Keywords to KeyLOG table ###
    ip = request.META.get('REMOTE_ADDR')
    keywords = request.META.get('HTTP_REFERER', '')
    keylog = KeylogForm(request.GET)
    keylog = keylog.save(commit=False)
    keylog.ipaddr = ip
    keylog.keyquery = keywords
    keylog.svae()

    return response


def keylog(request):
    if request.method == "GET":
        keylog_list = list(Keylog.objects.all().order_by()\
            .values('idpaddr', 'keywords', 'tel_log', 'regtime'))
        return JsonResponse(keylog_list, safe=False)
    return JsonResponse({'message':'error'})

forms.py

class KeylogForm(forms.ModelForm):
    class Meta:
        model = Keylog
    fields = ['ipaddr','keyquery','tel_log']

models.py

class Keylog(models.Model):
    ipaddr = models.CharField(max_length=32,null=True, blank=True) #save IP addr
    keyquery = models.CharField(max_length=128,null=True, blank=True) #save keywords
    tel_log = models.CharField(max_length=256,null=True, blank=True) #save tel_log
    regtime = models.DateTimeField(auto_now_add=True) #created time

Currently, it makes table as below;

I hope to save Tel_log data in the above table, when a user clicks <butto>...</button>.

So I made an index.html as below;

index.html

<div id="tel_log">
    <button class="btn btn-danger">
        hx-get="keylog/"
        hx-vals="[tel_log='CALL']"
        hx-trigger="click">
    Phone NUMBER
    </button>
</div>

My expectation is that when I clicked [Phone NUMBER] on the index page, "CALL" is appeared on the "tel_log" column of the above table, but it didn't work, just shows {message:error}

I'm a newbie on programming, so my approach for my needs may be wrong, but I'm really eager to make a web site for now, especially on this question. I also did try to use Ajax, but I didn't get any response also.

Thank you for all.

Click [button], save data in real time on the column of the table.

Back to Top