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 %}

As I cannot answer my own question yet, some more searching in seemingly unrelated questions led me to the answer to my own question [here](http://stackoverflow.com/a/18393243/943773). I'll update this question with more examples when allowed. — ryanjdillon, Mar 28 '16 at 19:20

score 4 · Accepted Answer · answered Apr 07 '16 at 07:42

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 %}

score 1 · Answer 2 · answered Jul 24 '22 at 05:15

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>

Implementing Django language selection form as buttons

2 Answers2