disable on form submit

issue.html

<form id="reportEventForm" method="POST" action="{{ url_for('map.main_map_page')}}">
    {{ report_event_form.hidden_tag() }}
    <fieldset>
        <div class="mb-3">
            <label class="col-form-lacbel">Node to report:</label>
            {% if report_event_form.node_to_report.errors %}
                {{ report_event_form.node_to_report(class="form-control is-invalid") }}
                <div class="invalid-feedback">
                    {% for error in report_event_form.node_to_report.errors %}
                        <span>{{ error }}</span>
                    {% endfor %}
                </div>
            {% else %}
                {{ report_event_form.node_to_report(class="form-control", placeholder="Enter a valid node") }}
            {% endif %}
        </div>
    </fieldset>
    <fieldset>
        <div class="mb-3">
            <label class="col-form-label">Event Description:</label>
            {% if report_event_form.description.errors %}
                {{ report_event_form.description(class="form-control is-invalid") }}
                <div class="invalid-feedback">
                    {% for error in report_event_form.description.errors %}
                        <span>{{ error }}</span>
                    {% endfor %}
                </div>
            {% else %}
                {{ report_event_form.description(class="form-control", placeholder="Detailed description") }}
            {% endif %}
        </div>
    </fieldset>
    <fieldset>
        <div class="mt-2">
            {{ report_event_form.submit_report(id="submit-btn2", class="btn btn-success btn", onclick="disableButtonOnClick(event)") }}
        </div>
    </fieldset>
</form>
<script>
    document.querySelector("#reportEventForm").addEventListener("submit", function(event) {
    // Delay disabling the button until after the form submission
    setTimeout(function() {
        document.querySelector("#submit-btn2").disabled = true;
    }, 10);  // Adjust delay as needed
});
</script>