accounting/expenses/templates/expense_create.html

{% extends "base.html" %}


{% block content %}
{% load django_bootstrap5 %}

{% block page_title %}Create expense{% endblock %}
<div class="form-check">
    <input class="form-check-input" type="checkbox" value="" id="IsMultiple" onchange="handleChange(this)" >
    <label class="form-check-label" for="flexCheckDefault">
      Is multiple payment
    </label>
</div>
<div id="display">
    <form action="" method="post">
    {% csrf_token %}
    {% bootstrap_form lone_expense_form %}
    {% bootstrap_button button_type="submit" content="Submit" %}
</form>
</div>


{% endblock content %}
{% block extra_js %} 
<script>

function handleChange(checkbox) {
    div = document.getElementById('display');
    if(checkbox.checked == true){
        div.innerHTML = `<form action="" method="post">
    {% csrf_token %}
    {% bootstrap_form mult_expense_form %}
    {% bootstrap_button button_type="submit" content="Submit" %}
</form>
        `        
    }else{
        div.innerHTML = `<form action="" method="post">
    {% csrf_token %}
    {% bootstrap_form lone_expense_form %}
    {% bootstrap_button button_type="submit" content="Submit" %}
</form>
        `
   }
}
</script>
{% endblock extra_js %}