8

У меня есть список из 6 елементов. Я получаю его в виде выпадающего списка через bootstrap-select. Я могу получать элементы списка в консоль только если форма отправляется на обработку. Вопрос:

Как сделать так, чтобы при выборке элемента, я сразу могу печатать его в консоль, еще до отправки формы?

app.py

description = ['one','two','three','four','five','six']

@app.route('/', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        docs = request.form.getlist('sel')
        print(docs)
        return render_template('login.html', description=description)
    return render_template('login.html', description=description)

login.html

      <form action="" method="POST" class="form-inline">
        <select id='sel' name='sel' class="selectpicker" multiple data-live-search="true">
          {% for desc in description %}
            <option value="{{desc}}">{{desc}}</option>
          {% endfor %}
        </select>
        <button type="submit" class="btn btn-primary">Identify</button>
      </form>

  <script type="text/javascript">
    $('select').selectpicker();
  </script>
10
  • Я знаю, что означает выражение "получить в морду". А что означает "получить в консоль" ?
    – Sergey
    4 июл 2020 в 11:15
  • @Sergey, делать print, фактически просто выводить в консоль
    – abby
    4 июл 2020 в 11:16
  • "еще до отправки формы" - Вы понимаете, что означает конструкция, которую Вы используете в программе: "@app.route('/', methods=['GET', 'POST']) def login():" ? Здесь Вы инструктируете Ваш HTTP сервер - запусти функцию login() прои поступлении GET или POST запроса. Понимаете? ПОСЛЕ того, как придёт запрос, начнёт выполняться эта функция.
    – Sergey
    4 июл 2020 в 11:19
  • @Sergey, я понимаю. я получаю страницу login, и на ней хочу получать то что выбираю
    – abby
    4 июл 2020 в 11:20
  • И сервер сформирует ответ после того, как пользователь нажмёт кнопку submit. Не ранее...
    – Sergey
    4 июл 2020 в 11:21

2 ответа 2

5

Нашел такое решение:

<select id='sel' name='sel' class="selectpicker" multiple data-live-search="true" onchange="printValue(this)">
   {% for desc in description %}
      <option value="{{desc}}">{{desc}}</option>
   {% endfor %}
</select>
<p id="mySelectedValue" style="margin-top: 10px;"></p>



<!-- In your script, call your function, which prints the data in your console-->
<script type="text/javascript">
    function printValue(selectedItem){
       $('#mySelectedValue').html(selectedItem.value);
    }
</script>
4

Никак. Делим проект на Frontend и Backend.
В данном случае Flask генерирует разметку и отправляет её клиенту. Далее на клиенте исполняется уже JS, НЕ PYTHON, КОТОРЫЙ ИСПОЛНЯЕТСЯ НА BACKEND. Следовательно, выбранный параметр можно асинхронно отправлять через JS на непосредственно backend. Удобнее всего это делать через AJAX.
Пример:

$.post(
"/someadress",
{
param1: "param1",
param2: 2
},
 onAjaxSuccess
);

function onAjaxSuccess(data)
{
// Здесь мы получаем данные, отправленные сервером и выводим их на экран.
alert(data);
}

Кидаете данный код в функцию, функцию в onclick свойство (ну или куда хотите) .
Не забудьте добавить в HTML референс на Jquery. Именно там обитает AJAX.
Ну и не забудьте сделать listener на Flask ->

from flask import request
@app.route('/someadress', methods=['POST'])
def somemethod():
   print(request.data)
   return 'ok'

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.