入力が動的に作成され、フラスコの入力からデータが取得される

Question

入力フィールドが表示されるテーブルを作成するために、HTMLとJavascriptを記述しました。ここにHTML Tableの写真があります。ここでHTML Table More Input

テーブルのHTMLコードとより多くの入力を作成するためのjavascriptです：

<form action="/information.html" method="POST"> 
    <table class="table table-borderless"> 
     <thead> 
      <tr> 
       <th style="text-align:center">Ticker</th> 
       <th style="text-align:center">Shares</th> 
      </tr> 
     </thead> 
     <tbody id='room_fileds'> 
      <tr> 
       <td style="text-align:center"> 
        <fieldset class="form-group"> 
         <input type="text" placeholder="AAPL" name="stock1"/> 
        </fieldset> 
       </td> 
       <td style="text-align:center"> 
        <fieldset class="form-group"> 
         <input type="text" placeholder="100" name="weight1"/> 
        </fieldset> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</form> 
<br/> 
<input type="button" id="more_fields" onclick="add_fields();" value="Add More" /> 
<input type='submit' value='Submit'/> 

<script> 
var count = 0 
function add_fields() { 
count++ 
var county = count.toString(); 
var objTo = document.getElementById('room_fileds') 
var divtest = document.createElement("tr"); 
divtest.innerHTML = '<td style="text-align:center"><input type="text"></td><td style="text-align:center"><input type="text"></td>'; 
objTo.appendChild(divtest) 
} 
</script> 

私はフラスコを使用しようとしていますユーザーが、それはこのようになり、よりを追加するボタンをクリックし続けるとすべての投稿入力を取得します。通常、私はそのようなstock1として名前の入力をしているし、私は、フラスコに次の操作を行います。しかし、私は動的に作成された入力のこのタイプを処理する方法がわからないよ

stock1=request.form.get('stock1',type=str) 

。ユーザーが1または2または25の入力ボックスにデータを入力するかどうかはわかりません。ユーザーがどれくらいのデータを入力するかわからない場合、フラスコを使用してこのデータをすべて取得する適切な方法はありますか？おそらく、私はすべてのテロップをリストに入れ、すべてのシェアを別のリストに入れたいと思っています。

Answer 1

ダイナミックに作成されたすべての入力を、同じ名前で、ダイナミックに作成されていない最初の入力フィールドとは異なる名前にする必要がある場合に気付きました。そこで、最初の入力s0と残りの動的に作成された入力s1を命名しました。私はs0上でrequest.form.get（）を呼び出すことができ、s1上でrequest.form.getlist（）を呼び出すことができます。私はs1にs0を追加することができ、私はすべての入力データでいっぱいです、私が望むリストを持っています。ただし、動的に作成された入力に、最初に作成された非動的に作成された入力と同じ名前を付けることはできません。

Answer 2

多分、このリポジトリを試してみてください。https://github.com/sebkouba/dynamic-flask-form すぐにうまく動作します。

Answer 3

フラスコについてはよく分かりませんが、このコードでは、オブジェクトの配列を取得し、サーバーロジックで1つずつ挿入することができます。

https://jsfiddle.net/8gdun4j0/

PS：使用jqueryの

arrayObject=[]; 
$("#subButon").on("click",function(){ 
for(var index=0;index<count+1;index++){ 
arrayObject.push(
{stock:$("#stock"+index).val(), 
weight:$("#weight"+index).val()} 
) 
} 
console.log(arrayObject); 
alert("objetos guardados") 
})