Search code examples
javascriptpythondjangoformsdropdown

Django Form dropdown fill with values

I have a from with fields I created in Django models.py. One of the fields is:

res_person_1 = models.TextField(verbose_name="Odgovorna osoba 1")

HTML page is:

{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
    <div class="content-section">

        <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Prijavite nesukladnost</legend>
                {{ form|crispy }}
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">Prijava</button>
            </div>
        </form>
    </div>

When I inspect the HTML page, ID of object is 'id_res_person_1'. At the page load I run script to get from database all users, which should fill the 'res_person_1' field and that field should be dropdown.

Script is:

<script type="text/javascript">
        var endpoint = '/call_jquery_korisnici/'
        var korisnik_ime_prezime = []
        $.ajax({
            method: "GET",
            url: endpoint,
            success: function(data){
                korisnik_ime_prezime = data.korisnik_ime_prezime
                console.log(korisnik_ime_prezime)
                },
            error: function(error_data){
                console.log("error")
                console.log(error_data)
                }
        })
    </script>

I don't know how to fill that field and how to make it dropdown. It doesn't work with:

        $("#id_res_person_1").html(korisnik_ime_prezime);
        document.getElementById('id_res_person_1').value = korisnik_ime_prezime;

If I console output var korisnik_ime_prezime: (2) ["TestName1 TestLastname1", "TestName2 TestLastname1"]

enter image description here

Solution

  • You can use replaceWith to replace your textarea with select-box then use each loop to iterate through your return response from server and then append option inside your select-box.

    Demo code :

    $(document).ready(function() {
  var korisnik_ime_prezime = []
  /*$.ajax({
    method: "GET",
    url: endpoint,
    success: function(data) {*/
  //just for demo
  korisnik_ime_prezime = ["TestName1 TestLastname1", "TestName2 TestLastname1"] // data.korisnik_ime_prezime
  //replcae textarea with slect
  $("#id_res_person_1").replaceWith("<select name='id_res_person_1' id='id_res_person_1' class='form-control'></select>")
  //loop
  $(korisnik_ime_prezime).each(function(i) {
    $("#id_res_person_1").append("<option>" + korisnik_ime_prezime[i] + "</option>") //append options
  })

  /*},
  error: function(error_data) {
    console.log("error")
    console.log(error_data)
  }
})*/
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form method="POST" enctype="multipart/form-data">

  <textarea id="id_res_person_1"></textarea>
  <div class="form-group">
    <button class="btn btn-outline-info" type="submit">Prijava</button>
  </div>
</form>