Question

我正在构建一个动态表单来捕获货币对的用户输入。例如，欧元/美元;瑞士法郎/美元等

我创建了一个动态表单，供用户添加他们想要的货币对。表单看起来像这样（没有CSS）：

在代码中，i JQuery为第n个货币对创建currency_n_1 / currency_n_2的名称。

表格是：

<form method="post" id="parentForm">
    <label>Please select your currency</label>
    <br>
    <div id="currency_1">
        <select name="currency_1_1" id="currency_1_1">
            <option>SGD</option>
            <option>CNY</option>
            <option>USD</option>
            <option>EUR</option>
        </select> 
        <select name="currency_1_2" id="currency_1_2">
            <option>SGD</option>
            <option>CNY</option>
            <option>USD</option>
            <option>EUR</option>
        </select> 
        <br>
    </div>
    <input type="button" id="add_button" value="Add Currency">
    <input type="button" value="remove" id="remove_button">
</form>

Jquery是：

<script type="text/javascript">
$(document).ready(function() {
    console.log("JQ working")
    var index = 1;
    var index_1 = 2;
    var currency_pair = [];

    // Create a remove button
    var remove_1 = $('<input type="button" value="remove" id="remove_button">');

    $("#add_button").click(function(){
        console.log(index);
        var remove = $('<input />', {type:'button', value:'Remove',  id:'remove_'+index_1 });
        $("#currency_"+index).after($("#currency_"+index).clone().attr({"name":"currency_"+index_1, "id":"currency_"+index_1}));
        $("#currency_"+index_1).css("display","inline");
        $("#currency_"+index_1).children('#currency_'+index+'_1').attr({"name":"currency_"+index_1+"_1","id":"currency_"+index_1+"_1"});

        $("#currency_"+index_1).children('#currency_'+index+'_2').attr({"name":"currency_"+index_1+"_2","id":"currency_"+index_1+"_2"});
        $("#currency_"+index_1).children('#remove_'+index).attr({"name":"remove_"+index_1,"id":"remove_"+index_1});
        if (index==1) {
            console.log("noew index is 1")
            $("#currency_"+index_1 +"_2").after(remove);
        };
        index = index + 1;
        index_1 = index + 1;
        console.log(index);

        $("#remove_"+index).click(function(){
            //Remove the whole cloned div
            console.log("remove working")
            $(this).closest("div").remove();
        });
    });
});
</script>

因此，每个货币对的名称为currency_n_1和currency_n_2 。

但我不知道如果只使用一对货币我如何使用request.get获取数据

    def post(self):
        user_currency_1_1 = self.request.get('currency_1_1')
        user_currency_1_2 = self.request.get('currency_1_2')

但我实际上并不知道用户提交了多少对。那么，当用户提交此动态表单时，如何确保获得所有货币对？

Answer 1

我会使用react或类似的。但你可以用普通的javascript做到这一点。实质上，您在客户端网页中构建一个JSON对象，维护每个n对的列表。使用onchange事件更新列表，然后更新它们出现的位置。所有工作都在客户端，在浏览器中完成。更清洁，因为您不需要担心索引（'#currency_' + index + '_1'）。列表自动排序。使用标准列表方法：push()，slice()，splice()等，并使用分配来修改浏览器中的列表。

在提交时，您只需在请求中发送JSON对象，然后在后端循环它以执行您需要的任何操作。

如何使用Google App Engine的request.get获取动态表单数据

1 个答案: