Implementing Django language selection form as buttons

Question

I would like to implement the django language selection as a series of buttons, rather than a dropdown select based form. I’ve tried to do this by adding submit, formaction and value attributes to the button, but it is not working correctly.

What is the correct way of implementing the the below input form into a series of buttons? Thanks!

From the Django internationalization docs:

{% get_current_language as LANGUAGE_CODE %}
{% get_available_languages as LANGUAGES %}
{% get_language_info_list for LANGUAGES as languages %}

<form action="{% url 'set_language' %}" method="post">{% csrf_token %}
  <input name="next" type="hidden" value="{{ redirect_to }}" />
  <select name="language">
    {% for language in languages %}
      <option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected="selected"{% endif %}>
        {{ language.name_local }} ({{ language.code }})
      </option>
    {% endfor %}
  </select>
  <input type="submit" value="Go" />
</form>

My attempt with a button:

{% get_current_language as LANGUAGE_CODE %}
{% get_available_languages as LANGUAGES %}
{% get_language_info_list for LANGUAGES as languages %}

{% for language in languages %}
  <button type="submit" title="{{ language.code }}" formaction="{% url 'set_language' %}" value="{{ language.code }}">
    {{ language.name_local }} ({{ language.code }}) 
  </button>
{% endfor %}

Asked By: ryanjdillon

||

Source

Answer 1

The following is a method creating each language as its own hidden form with a submit button that can be styled with css.

If you would like the active language to be styled differently, you could use a django if statement to change the css if it is the current language.

{% get_current_language as LANGUAGE_CODE %}
{% get_available_languages as LANGUAGES %}
{% get_language_info_list for LANGUAGES as languages %}

{% for language in languages %}
  <form action="{% url 'set_language' %}" method="post" id="form_{{ language.code }}" style="display:inline!important;">
  {% csrf_token %}
    <input name="next" type="hidden" value="{{ redirect_to }}" />
    <input name="language" type="hidden" value="{{ language.code }}" />
  </form>
  <button class="lang-button" type="submit" form="form_{{ language.code }}" value="Submit">[{{ language.code }}]</button>
{% endfor %}

Answered By: ryanjdillon

Answer 2

You can also put all buttons in one form:

{% load i18n %}

<form action="{% url 'set_language' %}" method="post">{% csrf_token %}
  <input name="next" type="hidden" value="{{ redirect_to }}">
  {% get_current_language as LANGUAGE_CODE %}
  {% get_available_languages as LANGUAGES %}
  {% get_language_info_list for LANGUAGES as languages %}
  {% for language in languages %}
    <button name="language" value="{{ language.code }}" type="submit">{{ language.code }}</button>
  {% endfor %}
</form>

Answered By: Alexey Borealis

Implementing Django language selection form as buttons

Question:

Answers: