如何将变量从JavaScript传递到Django视图

时间:2019-06-21 06:16:38

标签: javascript django

我正在尝试从下拉列表中接受用户的输入。我使用javascript来获取动态大小的输入,然后使用appendChild将输入存储在变量中。现在,我想将此变量发送回django视图,在其中可以对其执行一些操作。

我尝试在Django中使用getlist和get函数,但是无法弄清楚如何获取变量。

<form method = "POST" name = "myForm" onsubmit = "return validateForm()">{% csrf_token %}

    <p>Entry Condtion:</p>
    <div id ="entry-parameters"></div>
    <button type="button" onclick= "add_entry_parameter()" class="btn btn-primary m-t-15 waves-effect">Add a new Entry Condition</button> 
    <button type= "button" onclick= "remove_entry_parameter()" class= "btn btn-primary m-t-15 waves-effect">Remove Entry Condtion</button>
    <br>

    <p>Exit Condtion</p>
    <div id = "exit-parameters"></div>
    <button type="button" onclick= "add_exit_parameter()" class="btn btn-primary m-t-15 waves-effect">Add a new Exit Condition</button> 
    <button type= "button" onclick= "remove_exit_parameter()" class= "btn btn-primary m-t-15 waves-effect">Remove Exit Condtion</button>
    <br>
    <br>
    <br>    
    <input type="submit" value="submit"  >

</form>

<script>
    var list = ['open' , 'close' , 'high', 'low'];
    var addField = document.getElementById('addField');
    parameters= document.getElementById('entry-parameters');
    exit_parameters= document.getElementById('exit-parameters');

    parameters.setAttribute("name" , "parameters" );
    exit_parameters.setAttribute("name" , "exit_parameters");

    function remove_entry_parameter()
    {
        parameters.removeChild(parameters.lastElementChild);
    }
    function add_entry_parameter()
    {

            var _form = document.body.appendChild(document.createElement('form')),
            _input = _form.appendChild(document.createElement('input')),
            _condition = _form.appendChild(document.createElement('input')),
            _input2 = _form.appendChild(document.createElement('input')),
            _datalist = _form.appendChild(document.createElement('datalist'));
            _cond_list = _form.appendChild(document.createElement('datalist'));


            _input.placeholder = "First Parameter";
            _input.list = 'exampleList';
            _input.setAttribute('list','exampleList')
            _input.datalist_id = 'exampleList';

            _input2.placeholder = "Second Parameter";
            _input2.list = 'exampleList';
            _input2.setAttribute('list','exampleList')
            _input2.datalist_id = 'exampleList';

            _condition.placeholder = "Condition";
            _condition.list = 'conditionList';
            _condition.setAttribute('list','conditionList')
            _condition.datalist_id = 'conditionList';

            _datalist.id = 'exampleList';
            _cond_list.id = 'conditionList';

            var list = ['open' , 'close' , 'high' , 'low' , 'vol'];
            var cond_list = ['greater than', 'less than' , 'crossed above' , 'crossed below', 'equal to'];



            for (var i = 0; i < list.length ; i++) {
                var _option = _datalist.appendChild(document.createElement('option'));
                _option.text =list[i];   
            };
            for (var i = 0; i < cond_list.length ; i++) {
                var _option = _cond_list.appendChild(document.createElement('option'));
                _option.text = cond_list[i];   
            };

            parameters.appendChild(_form);
    }
// I've written a similar code for exit_parameters
</script>


def get_data(request):
    if request.method == 'POST':
        entry_data = request.POST.get('parameters')
        exit_data = request.POST.get('exit_parameters')
        print(entry_data)
        print(exit_data)

    return render(request, 'get_data.html' , {})

1 个答案:

答案 0 :(得分:1)

您的函数add_entry_parameter首先在页面上创建一个新表单。您几乎可以肯定希望页面上有一个表单-无需创建新表单。

在下拉列表中所做的选择应该在DOM(检查器)中以唯一的字段名称显示(如上面响应中所述,表单上的所有字段都具有相同的名称是没有意义的) -所有字段必须具有唯一的名称。

一旦您验证了现有的唯一命名字段中的值在用户进行选择时已更新,则该值应在POST中输入。