将所有下拉数据从HTML / Jenja发送回Flask服务器

Question

I posted a similar question here: Flask - Data inputting on the client side 我在这里发布了一个类似的问题： Flask-在客户端输入数据

However, I figured out another way to solve that problem and now encounter a new one below. 但是，我想出了另一种方法来解决该问题，现在在下面遇到了一个新方法。

In short, I'm building a portal for our client where they can log in and upload their financial documents. 简而言之，我正在为我们的客户建立一个门户，他们可以登录并上传其财务文件。 There is a predefined schema in flask that maps financial items in the uploaded document. flask中有一个预定义的架构，用于映射上载文档中的财务项目。 For example, all accounts related to 'Cash' will simply be mapped into 'Cash'. 例如，所有与“现金”相关的帐户都将被简单地映射为“现金”。

The html code below basically renders a table that is similar to the uploaded file with an additional column 'Mapping' that maps each row of account. 下面的html代码基本上呈现了一个类似于上载文件的表格，并带有附加的“映射”列，该列映射了帐户的每一行。 If there are new accounts added in the financial document, there will be a drop-down section for the client to pick the mapping schema. 如果在财务文档中添加了新帐户，则将有一个下拉部分供客户选择映射架构。 A screenshot is included here for your visuals. 屏幕截图包含在此处以供您查看。

https://drive.google.com/file/d/1RuYq3rdaG5XSxLTPYO46PlqBujuy_I8A/view?usp=sharing https://drive.google.com/file/d/1RuYq3rdaG5XSxLTPYO46PlqBujuy_I8A/view?usp=sharing

My question is how do I set up the event for the button "Confirm mapping" to send all selected dropdown inputs back to the flask server in the form of JSON object (preferably). 我的问题是如何为按钮“确认映射”设置事件，以将所有选定的下拉输入以JSON对象的形式（最好）发送回Flask服务器。 In this case, I want the JSON to be: 在这种情况下，我希望JSON为：

{
"Cash" : "Lucky money",
"Debt" : "Bad debt"
}

I include some html code below. 我在下面包含一些html代码。 I know it's not very reproducible but my company codebase is too big to share. 我知道它的再现性不是很好，但是我的公司代码库太大而无法共享。 I'm just interested in some general method to accomplish the task. 我只是对完成任务的一些通用方法感兴趣。

<!-- results.html -->

<body>
  <div>
     <table id="Mapped table">
       <h2 align='center'>Mapped data</h2>
          <tr>
              {% for col in column_names %}
              <th>{{col}}</th>
              {% endfor %}
          </tr>
          {% for row in row_new %}
          <tr>
              {% for col, row_ in zip(column_names, row) %}
              {% if col == link_column %}
              <td>

                <select id="dropbtn">
                  <option value="1">Cash</option>
                  <option value="2">Debt</option>
                  <option value="3">Retained Earnings</option>
                </select>

                <div id="selection"></div>

                <script>
                  var e = document.getElementById("dropbtn");
                  var strUser = e.options[e.selectedIndex].text;
                </script>

              </td>
              {% else %}
              <td>{{row_}}</td>
              {% endif %}
              {% endfor %}
          </tr>
          {% endfor %}
     </table>
  </div>

  <div class="wrapper">
    <button class="button" id="myBtn">Confirm mapping</button>
</body>

Answer 1

You have some issues: 您有一些问题：

ID must be unique. ID必须是唯一的。 Hence, you can consider to change from select id="dropbtn" to **select class="dropbtn" 因此，您可以考虑将select id =“ dropbtn”更改为** select class =“ dropbtn”
A table should contain a body, header and footer. 表格应包含正文，页眉和页脚。 Instead you have a series of rows (ie: tr) 相反，您有一系列的行（即：tr）
The table ID contains a space. 表ID包含一个空格。 This is a problem when selecting by ID. 按ID选择时，这是一个问题。 For this take a look to escapeSelector 为此，请看一下scapeSelector

A possible solution to your issue can be: 您的问题的可能解决方案可以是：

 $('#myBtn').on('click', function(e) { var drpdbJson = {}; // for each row containing a select.... $('#Mapped\\\\ table tr:gt(0):has(select)').each(function(idx, ele) { // get the selected value var drpdwnKey = $(ele).find('.dropbtn option:selected').text(); // get the second column text var drpdwnValue = $(ele).find('td:eq(1)').text(); // add to the json result if (drpdbJson[drpdwnKey] == undefined) { drpdbJson[drpdwnKey] = drpdwnValue; } else { drpdbJson[drpdwnKey] = (typeof drpdbJson[drpdwnKey] === 'string') ? [drpdbJson[drpdwnKey], drpdwnValue] : [...drpdbJson[drpdwnKey], drpdwnValue]; } }) // print the json obj // pay attention: a json cannot contain duplicated keys: // if you select the same value for both select in the example.... console.log(JSON.stringify(drpdbJson)) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <h2 align='center'>Mapped data</h2> <table id="Mapped table"> <tr> <th>Account Number</th> <th>Account Description</th> <th>Amount</th> <th>Mapping</th> </tr> <tr> <td>2010</td> <td>Lucky money</td> <td>1111.0</td> <td> <select class="dropbtn"> <option value="1" selected>Cash</option> <option value="2">Debt</option> <option value="3">Retained Earnings</option> </select> </td> </tr> <tr> <td>1234</td> <td>Bad debt</td> <td>222222.0</td> <td> <select class="dropbtn"> <option value="1">Cash</option> <option value="2" selected>Debt</option> <option value="3">Retained Earnings</option> </select> </td> </tr> <tr> <td>1234</td> <td>USD</td> <td>222222.0</td> <td> <select class="dropbtn"> <option value="1" selected>Cash</option> <option value="2">Debt</option> <option value="3">Retained Earnings</option> </select> </td> </tr> <tr> <td>1234</td> <td>Petty cash</td> <td>222222.0</td> <td> <select class="dropbtn"> <option value="1" selected>Cash</option> <option value="2">Debt</option> <option value="3">Retained Earnings</option> </select> </td> </tr> </table> </div> <div class="wrapper"> <button class="button" id="myBtn">Confirm mapping</button> </div>

将所有下拉数据从HTML / Jenja发送回Flask服务器

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-08-06 22:01:32

将所有下拉数据从HTML / Jenja发送回Flask服务器

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-08-06 22:01:32

解决方案1
1 已采纳 2019-08-06 22:01:32