Как включить регистрацию при нажатии на кнопку и в то же время будет включена регистрация при выезде и наоборот с помощью JavaScript?

Я работаю над проектом, где мне нужно разработать часть посещаемости, используя Django и JS (как основные языки), и я столкнулся с проблемой, что после нажатия кнопки регистрации она не отключается, и пользователь может зарегистрироваться несколько раз, что приведет к ошибке при регистрации из-за базы данных.

Вот что я пытался сделать с помощью Javascript, но не получилось...

<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>

Вот что я пытался сделать, используя язык Django Template, но безуспешно.

{% 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 %}

Ниже показано, как выглядит мой HTML

<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-->

Наконец, вот как выглядит моя секция views.py, основанная на классах.

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})

Я пытался найти информацию на многих интернет-ресурсах, но не смог разобраться. Я новичок в JavaScript, поэтому, пожалуйста, объясните решение простым языком

Вернуться на верх