Как связать кнопку переключения с формой - PullRequest
Новая
       6

Как связать кнопку переключения с формой

0 голосов
/ 06 сентября 2018

У меня есть веб-приложение, и я хочу внедрить в него кнопку переключения, используя этот пример начальной загрузки , чтобы пользователь мог выбрать язык. Кроме того, мне нужно, чтобы он был представлен с POST.

Как я могу закодировать этот тип переключателя, например, 

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

чтобы пользователь нажимал на одну из них, а POST отправлялся со значениями "pt" или "eng"?

РЕДАКТИРОВАТЬ: Мне просто нужно простой POST с перенаправлением. Я использую Django и для перевода документация предлагает использование этого кода: 

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

но я не хочу выпадающий список и кнопку "Перейти". Я бы предпочел переключатель.

Ответы [ 3 ]

0 голосов
/ 06 сентября 2018

Дайте кнопкам названия и значения: 

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

Затем прочитайте данные точно так же, как и из вашего <select>.

0 голосов
/ 06 сентября 2018

Отправка только языка с POST (через 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>
0 голосов
/ 06 сентября 2018

Вы можете создать форму начальной загрузки следующим образом.Я предположил, что вы хотите проверить форму с помощью сценария php (send.php).Добавьте атрибут name, который поможет вам получить значения в сценарии проверки.

  <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>
...