Dynamically created inputs then getting data from inputs with flask

Question

I wrote some HTML and Javascript to create a table that has input fields that appear. Here is a picture of the HTML Table. When the user keeps clicking the button to add more it looks like this: HTML Table More Input

Here is the HTML code for the table and the javascript to create more inputs:

<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>

I am trying to use flask to get all the post input. Usually I have an input with a name such as stock1 and then I do the following with flask:

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

However, I am unsure of how to handle this type of dynamically created inputs. I am not sure if the user will enter data into 1 or 2 or even 25 input boxes. Is there a proper way to use flask to get all of this data if it is unknown how much data the user will enter? Possibly, I would like to get all of the tickers into a list and all of the shares into another list.

Maybe [this](http://stackoverflow.com/questions/32633051/get-multiple-values-from-one-html-input-through-python-flask) helps. — lrnzcig, Aug 16 '16 at 15:54
@Irnzcig so if I name each input 'tickers' then i can do tickers = request.form.getlist('tickers')? — Mr.Roboto, Aug 16 '16 at 15:56

score 1 · Answer 1 · answered Aug 16 '16 at 20:15

1

Maybe try this repository: https://github.com/sebkouba/dynamic-flask-form Works fine out of box.

answered Aug 16 '16 at 20:15

lukassliacky

364
7
25

score 1 · Accepted Answer · answered Aug 17 '16 at 17:58

I noticed that if you want to have all dynamically created inputs with the same name that they must be a different name from the first input field that is not dynamically created. So, I named the first input s0 and the rest of the dynamically created inputs s1. I can then call request.form.get() on s0 and can call request.form.getlist() on s1. I can then append s0 to s1 and I have the list that I wanted, which is full of all the input data. However, it does not work if you let the dynamically created inputs have the same name as the first non dynamically created input.

score 1 · Answer 3 · answered Aug 17 '16 at 18:17

I don´t know much about flask, but with this code, you can get the array of objects and insert them one by one with your server logic.

https://jsfiddle.net/8gdun4j0/

PS: used 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")
})

Dynamically created inputs then getting data from inputs with flask

3 Answers3