動態創建的輸入，然後從輸入獲取數據與燒瓶

我寫了一些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個輸入框中。如果不知道用戶將輸入多少數據，是否有合適的方式使用燒瓶來獲取所有這些數據？可能的話，我想把所有的代碼都放到一個列表中，並把所有的代碼放到另一個列表中。

來源

2016-08-16 Mr.Roboto

您可以發佈您的Python瓶的形式？ – McBoman

也許[這]（http://stackoverflow.com/questions/32633051/get-multiple-values-from-one-html-input-through-python-flask）幫助。 – lrnzcig

@Irnzcig所以如果我將每個輸入的'tickers'命名，那麼我可以做tickers = request.form.getlist（'tickers'）？ –

我注意到如果你想讓所有動態創建的輸入具有相同的名稱，它們必須是與第一個不是動態創建的輸入字段不同的名稱。因此，我命名了第一個輸入s0和其餘動態創建的輸入s1。然後，我可以調用s0上的request.form.get（），並可以調用s1上的request.form.getlist（）。然後，我可以將s0附加到s1，並且我有我想要的列表，其中包含所有輸入數據。但是，如果讓動態創建的輸入與第一個非動態創建的輸入具有相同的名稱，則它不起作用。

來源

2016-08-17 17:58:16

也許試試這個知識庫：https://github.com/sebkouba/dynamic-flask-form Works out out of box。

來源

2016-08-16 20:15:38 lukassliacky

我對燒瓶不太瞭解，但是通過這段代碼，您可以獲得對象數組，並將它們逐個插入到您的服務器邏輯中。

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") 
})

來源

2016-08-17 18:17:31 Yazsid

動態創建的輸入，然後從輸入獲取數據與燒瓶

回答

相關問題