relational_choice.html

{% extends 'base.html' %}

{% block content %}

<div class="container">
  <div class="dashboard-block">
      <h2 class="dashboard-info-title">Profile Info</h2>
      <form method="POST" action="{% url 'userprofile:create-profile' %}" enctype="multipart/form-data">{% csrf_token %}
          
          {% for field in form %}
          <div class="row">
              <div class="col-sm-8">
                 <label for="">{{field.label_tag}}</label>
                  {{ field }}
              </div>
          </div>
          {% endfor %}
        
          <button class="submit" type="submit">Save Information</button>
      </form>
  </div>
</div>

        </div>
      </div>
    </section>
{% endblock %}

{% block javascript %}
    <script>
        $( document ).ready(function() {
            $("#id_division").change(function () {
                var id = $("select#id_division").val();
                var url = 'http://localhost:8000/api/v01/district-list/'+id+'/';
                console.log("value "+url);

                $("#id_district").empty();
                $("#id_district").append("<option>------------</option>");  // add empty ----- to thana field

                axios.get(url)
                    .then(function (response) {
                        var res_data = response.data;

                        for(var i=0; i<res_data.length; i++){
                            console.log("<option value="+res_data[i]["pk"]+">"+res_data[i]["name"]+"</option>")
                            $("#id_district").append(
                                "<option value="+res_data[i]["pk"]+">"+res_data[i]["name"]+"</option>"
                        );
                        }
                    })
            })
        });
    </script>
{% endblock %}