Question

我有一个Web应用程序，我想使用此bootstrap example在其中实现一个“切换按钮”，以便用户选择语言。另外，我需要通过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>

这样，当用户单击其中之一时，将使用“ pt”或“ eng”值提交POST？

编辑：我只需要一个带重定向的简单POST。我正在使用Django，并使用以下代码翻译documention suggests：

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

但我不希望使用下拉菜单和“开始”按钮。我希望切换器。

Answer 1

您可以按以下方式创建引导表单。我假设您想使用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>

Answer 2

给出按钮名称和值：

<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>中读取数据一样。

Answer 3

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

如何将开关按钮与表单连接

3 个答案: