How to Enable check-in when clicked and at the same time checkout will be enabled and vice versa using JavaScript?

I am working on a project where I need to develop the attendance part using Django and JS (as main languages) and I'm stuck with an issue that after clicking check-in button it does not get disabled and the user can check-in multiple time that will cause error when checking out because of the Database.

This is what I tried using Javascript but failed..

<script> 
        const button1 = document.querySelector('.checkin');
        const button2 = document.querySelector('.checkout');

        button1.onlclick = function () {
        document.cookie = "button1=disabled; button2=enabled; expires=Fri, 31 Dec 9999 23:59:59 GMT";
        };

        button2.onclick= function () {
        document.cookie = "button1=enabled; button2=disabled; expires=Fri, 31 Dec 9999 23:59:59 GMT";
        };


        window.onload = function () {
        const cookies = document.cookie.split("; ");
        cookies.forEach(function (cookie) {
            const [key, value] = cookie.split("=");
            if (key === "button1" && value === "disabled") {
            button1.disabled = true;
            button2.disabled = false;
            } else if (key === "button1" && value === "enabled") {
            button1.disabled = false;
            button2.disabled = true;
            }
        });
        };
    </script>

This is what I tried using Django Template language but failed.

{% if items.check_in is none %}
        <script type="text/javascript">
        const button1 = document.querySelector('.checkin');
        const button2 = document.querySelector('.checkout');
        button1.disabled = false;
        button2.disabled = true;
        </script>

    {% else %}
        <script type="text/javascript">
        const button1 = document.querySelector('.checkin');
        const button2 = document.querySelector('.checkout');
        button1.disabled = true;
        button2.disabled = false;
        </script>
    {% endif %}

Below is how my HTML looks like

<form method="post">   
 {% csrf_token %}                       
    <div class="row">
      <div class="col-sm-12 text-center">
        <input type="submit" id="submit" name="Check" class="btn btn-primary checkin" value="Check-In">
        <input type="submit" id="submit" name="Check" class="btn btn-primary checkout" value="Check-Out">
      </div><!--end col-->
    </div><!--end row-->
</form><!--end form-->

And at last here's how my class based views.py section looks like.

class MyAttendance(View):
    template_name = 'dms_pages/my-attendance.html'

    def get(self, request):
        current_user = request.user
        if (str(current_user) == "AnonymousUser") or (request.user.is_authenticated and request.user.is_admin and not request.user.is_clinic):
            return render(request, 'dms_pages/login.html')

        attendance_list = Attendance.objects.all()
        return render(request, self.template_name, {"attendance_list" :attendance_list})
    
    def post(self, request):
        current_user = request.user
        if (str(current_user) == "AnonymousUser") or (request.user.is_authenticated and request.user.is_admin and not request.user.is_clinic):
            return render(request, 'dms_pages/login.html')
        
        if request.POST['Check'] == 'Check-In':
            now = datetime.now()
            time = now.strftime("%H:%M:%S")
            check_in = time
            date_ = f"{date.today()}"
            day_list = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
            today = date.today()
            day_int = today.weekday()
            day = day_list[day_int]
            current_user = request.user
            attendance_ = Attendance(name=current_user, check_in=check_in, date=date_, day=day)
            attendance_.save()
            attendance_list = Attendance.objects.all()
            return render(request, self.template_name, {"attendance_list" :attendance_list})
        
        elif request.POST['Check'] == 'Check-Out':
            current_user = request.user
            attendance_ = Attendance.objects.get(name = current_user)
            now = datetime.now()
            time = now.strftime("%H:%M:%S")
            check_out = time
            attendance_.check_out = check_out
            attendance_.save()
            attendance_list = Attendance.objects.all()
            return render(request, self.template_name, {"attendance_list" :attendance_list})

I tried to search many internet resources but I am unable to figure it out. I am kind of new to JavaScript so please do explain the solution in a layman language.

Back to Top