how to instantly load a list of options after submitting a value in a django form

Question

I have an easy template, first the user selects a country from a list of countries, then selects a region from a list of regions of the selected country, finally submits and results are shown.

The problem is when a country is selected the regions of that country are shown only after the submit button is clicked so the user have to click submit two times, first after selecting a country to see the list of regions, second time to see results after selecting a region.

# models.py

class Region(models.Model):
    country_list = [('IT', 'Italy'),
                    ('FR', 'France')]

    name = models.CharField(max_length=38)
    country = models.CharField(max_length=2, choices=country_list, default="IT")

#views.py

def index_w(request):

    country = request.GET.get('country')
    region = Region.objects.all()
    region = region.filter(country=country)
    regions = request.GET.get('regions')

    results = Result.objects.all()
    if regions is not None:
        results = results.filter(region=regions)
    return render(request, 'index_uni.html', {
                                              'regions': region,
                                              'country': country
                                              })

/*template*/

<form method="get" action="/university/" class="form-area">
<select name="country">
        <option value="IT">Italia</option>
        <option value="FR">France</option>
    </select>
<select name="regions">
    {% for region in regions %}
        <option value="{{region.id}}">{{region.name}}</option>
    {% endfor %}
</select>
<input type="submit">
</form>

When the page is loaded for the first time and the user selects a value for "country" there's no option for "regions"; after submit is clicked it correctly displays all the regions of France or Italy. How can the page displays the regions of Fr or It as soon as a country is selected? Thanks everybody for any help, any suggestion is appreciated, I'm currently looking at part 4 of the Django tutorial but could't find nothing about this issue.

Answer 1

Use AJAX through JavaScript to fetch a list of regions. AJAX stands for Asynchronous JavaScript and XML. It is the concept of making asynchronous calls to your web server from the web browser through JavaScript. It allows you to ask your server to do more work in the background without your user having to make a separate request manually, causing a page reload. The concept of AJAX is central to Web Programming today.

You would create a url that maps to a new view that takes a country as a parameter in request.GET (the querystring). Then, it would filter down to get the regions, and return those in a JSON (JavaScript Object Notation - a text format) response.

Then create an on click event for the country dropdown. When the user selects a country, you would fire off JavaScript to fetch this url through JavaScript (look at JQuery AJAX which is simpler than using vanilla XHR requests). After the request returns, you would update the dropdown with the list of regions returned from the response.

Answer 2

我建议你应该尝试在前端使用嵌套选择