Получение имени кнопки в качестве ввода - PullRequest
Новая
       3

Получение имени кнопки в качестве ввода

0 голосов
/ 03 мая 2018

В этом примере я присваиваю переменную (hsname) школы, которая выбирается при отправке формы: 

<form class="w3-wide" action="/hschool" method="post">
    <input list="hschools" name="hsname" autocomplete="off">
        <datalist id="hschools">
            <option value= "hs1">
            <option value= "hs2">
        </datalist>
    <input type="submit">
</form>

Затем я использую это значение в python (с колбой) и для его получения использую следующее (в отдельном файле .py): 

hsname = request.form.get("hsname")

предыдущий работает нормально.

Аналогичным образом я хочу присвоить переменной имя кнопки, на которую нажимает пользователь (b1 или b2). Следующее не работает, так как нет переменной, которая записывает кнопку, которую нажимает пользователь. 

<form class="w3-wide" action="/subject" method="post">
            <button class="button button4" name="b1">b1</button>
            <button class="button button4" name="b2">b2</button>
</form>

Как я могу это сделать?

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

Ответы [ 3 ]

0 голосов
/ 03 мая 2018

Вы можете создать id для каждой кнопки, которая может быть захвачена на стороне клиента и отправлена ​​на сервер через ajax: 

<html>
 <head>   
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 </head> 
     <input type='text' id='value'>   
     <button class="button button4" name="b1">b1</button>
     <button class="button button4" name="b2">b2</button>
 </form>
  <div id='user_results'></div>
 <script>
   $(document).ready(function() {
      $('button').click(function(even){
         var the_id = event.target.id;
         var user_input = $('#value').val();
         $.ajax({
           url: "/get_user_data",
           type: "get",
           data: {btn: the_id, result:iuser_input},
           success: function(response) {
            $('user_results').html(response);
          },
          error: function(xhr) {
           //Do Something to handle error
         }
        });
       });
   });
 </script>
</html>

Затем в файле .py создайте маршрут для получения данных из ajax: 

@app.route('/get_user_data')
def get_data():
   button_id = flask.request.args.get('btn')
   user_input = flask.request.args.get('result')
   return '<p>Thanks</p>'
0 голосов
/ 03 мая 2018

Если вы хотите отправить информацию на сервер сразу после нажатия кнопки, вы можете присвоить name и value html <button>, и они будут отправлены в виде: 

<form class="w3-wide" action="/subject" method="post">
    <button type="submit" name="clicked_btn" value="b1">b1</button>
    <button type="submit" name="clicked_btn" value="b2">b2</button>
</form>

После нажатия одной из этих кнопок форма будет отправлена, а имя и значение (например, clicked_btn=b1) будут отправлены на сервер (вместе с любыми другими входными данными в форме).

С другой стороны, если вы хотите просто запомнить состояние кнопки, чтобы она работала как флажок или как переключатель, она отправлялась на сервер только при нажатии (другой) кнопки отправки, затем я предлагаю использовать флажок или переключатель и изменить его внешний вид с помощью CSS, чтобы он выглядел как кнопка.

Вы также можете использовать javascript для хранения некоторой информации на входе <input type=hidden>, который позднее будет отправлен на сервер.

0 голосов
/ 03 мая 2018

Вы можете поместить свою кнопку в форму со скрытым вводом и получить доступ к значению с помощью request.form.get("hsname") или request.POST.get("hsname) в зависимости от того, как колба реализует это (я больше знаком с django).

Обратите внимание, что вам понадобится 1 форма + ввод на кнопки 

<form method="POST" action="some_url/">
    <input type="hidden" name="hsname" value="the_name_of_the_button">
    <button class="button button4" type="submit"></button> 
</form>

РЕДАКТИРОВАТЬ: это html 4.1, для html 5 см. Ответ zvone.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...