asked    Merry     2018-10-22       html       8 view        3 Answers

[SOLVED] How connect a Switch Button with a form

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.

  3 Answers  

        answered    Jeff     2018-10-22      

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>


        answered    Agnes     2018-10-22      

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



        answered    Rita     2018-10-22      

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=""></script>
<script src="" 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>




Your Answer





 2018-10-22         Newman

Java custom sort of Integer objects in ArrayList<Integer>

This question already has an answer here: Sorting an array of int in lexicographic order 5 answers Since I think you would like the values to be sorted lexicographically all you have to do is use comparator that turns both the items into strings.list.sort(Comparator.comparing(Object::toString));System.out.println(list); [1, 1090, 10901, 10902, 10903, 10904, 1190, 11901, 11902, 11903, 11904, 1290, 12901, 12902, 12903, 12904, 1310, 13102, 13103, 13104, 3101, 590, 5901, 5902, 5903, 5904, ...
 java                     3 answers                     83 view
 2018-10-22         Alberta

Using DataTables with momentjs in Angular 6 gets fn.dataTable.moment is not a function

so I'm kinda frustraded since this issue seems so simple but yet i can't seem to fix it.I'm using a DataTable (which works fine) - now i want to make a column containing dates sortable by the german date format dd.MM.yyyy.I found the documentation on the datatables homepage: https://datatables.net/blog/2014-12-18But when i try to use the plugin it gives me this error:core.js:1673 ERROR TypeError: jquery__WEBPACK_IMPORTED_MODULE_4__.fn.dataTable.moment is not a function at help.component.ts:82 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke...
 jquery                     3 answers                     89 view
 2018-10-22         Virgil

jooq returns date without time for Oracle

I’m using Jooq v3.1.0 and have a problem with Oracle Date column. An Oracle procedure called by Jooq returns only date info without time (e.g.: “31.08.2018”. I expected “31.08.2018 18:44:05”)I tried the following workaround<database> <!-- Use this flag to force DATE columns to be of type TIMESTAMP --> <dateAsTimestamp>true</dateAsTimestamp> <!-- Define a custom binding for such DATE as TIMESTAMP columns --> <forcedTypes> <forcedType> <userType>java.sql.Timestamp</userType> <binding>org.jooq.impl.Da...
 java                     1 answers                     86 view