Question

在这个例子中，我正在为发送表单时选择的学校分配一个变量（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方法，但我应该在里面写什么，以便它存储一个直接发送到烧瓶的变量？

Answer 1

如果您想要在点击按钮时将信息作为soons发送到服务器，则可以将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>输入中，稍后将其发送到服务器。

Answer 2

你可以将你的按钮放在一个带有隐藏输入的表单中，并使用request.form.get("hsname")或request.POST.get("hsname)访问该值，具体取决于flask如何实现这一点（我更熟悉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的回答。

Answer 3

您可以为客户端可以通过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>'

获取按钮名称作为输入

3 个答案: