{% extends 'layout.html' %}

{% load static %}

{% load crispy_forms_tags %}

{% block content %}
<div class="form__box">
<h3 style="border-bottom:2px solid #0c031a" class="mb-3">COMPLETE REGISTRATION..</h3>
<form method="post" action="" id="formPage">
    {% csrf_token %}
            {{form|crispy}}
        <button type="submit" class="btn mt-3 form-control" id="submitBtn" style="background-color: #0c031a;color:white;">COMPLETE REGISTRATION</button>
    </form>
</div>

    <script>
        document.getElementById("formPage").onsubmit = function() {
                    document.getElementById("submitBtn").disabled = true;
                    document.getElementById("submitBtn").innerText = 'COMPLETING REGISTRATION';
                }
    </script>

    <script>
            $(document).ready(function(){
                var labels = document.getElementsByTagName('label');
                console.log(labels);
                Array.from(labels).forEach(element => {element.innerText = element.innerText.toUpperCase() });
                $('#div_id_fname>label').text('FIRST NAME*');
                $('#div_id_lname>label').text('LAST NAME*');
            });
    </script>
{% endblock %}