How connect a Switch Button with a form - html

Question

I have a web application and I want to implement in it a Switch Button using this bootstrap example, so that the user can choose the language. Also, I need it to be submitted with a POST.
How can I code this type of toggle button, e.g.,
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-default">pt</button>
<button class="btn btn-xs btn-primary active">eng</button>
</div>
so that when the user clicks in one of them, a POST is submitted with "pt" or "eng" values?
EDIT: I just need a simple POST with redirect. I'm using Django and to translate documention suggests the use of this code:
<form action="{% url 'set_language' %}" method="post">{% csrf_token %}
<input name="next" type="hidden" value="{{ redirect_to }}">
<select name="language">
{% get_current_language as LANGUAGE_CODE %}
{% get_available_languages as LANGUAGES %}
{% get_language_info_list for LANGUAGES as languages %}
{% for language in languages %}
<option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected{% endif %}>
{{ language.name_local }} ({{ language.code }})
</option>
{% endfor %}
</select>
<input type="submit" value="Go">
</form>
but I don't want a dropdown and the "Go" button. I would prefer the switcher.

Answer 1

You can create a bootstrap form as follows. I have assumed you want to validate the form using a php script (send.php). Add the name attribute, which will help you fetch the values in the validation script.
<form class="form-horizontal" action="send.php" method="post">
<div class="btn-group btn-toggle">
<button class="btn btn-xs btn-default" name="pt">pt</button>
<button class="btn btn-xs btn-primary name="eng" active">eng</button>
</div>
</form>

Answer 2

Give the buttons names and values:
<button class="btn btn-xs btn-default" name="language" value="pt">pt</button>
<button class="btn btn-xs btn-primary active" name="language" value="eng">eng</button>
Then read the data just like you would from your <select>.

Answer 3

Sending only language option with a POST (through AJAX)
// only if pressed a non-active button
$("button", "#language-selection").click(function (event) {
var $btn = $(event.currentTarget)
// only if not already active
if (!$btn.hasClass('active')) {
// you can switch the button as soon as clicked or in AJAX callback
changeActiveButton($btn)
$.post('https://jsonplaceholder.typicode.com/todos/1', {lang: $btn.text()}, function (data) {
// do whatever you want with your API callback data
})
}
})
function changeActiveButton($btn) {
// reset active & button type on previous button
$("button.active", "#language-selection")
.removeClass('btn-primary active')
.addClass('btn-default')
// set active & button type on current button
$btn
.removeClass('btn-default')
.addClass('btn-primary active')
}
#import "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="language-selection" class="btn-group btn-toggle">
<button class="btn btn-xs btn-default">pt</button>
<button class="btn btn-xs btn-primary active">eng</button>
</div>