繁体   English   中英

Django:如何创建动态表单,该表单会随着用户的点击而改变?

[英]Django: How can I create a dynamic form that changes on user click?

我正在建立一个健身日历网站,用户可以在其中添加具有不同数量的举重,器械和代表等的健身。因此,我需要一个当用户单击按钮时添加字段的表格。 我已经制作了一个模板和一些JavaScript,以准确描述它是什么:

网址:

url(r'^add/(?P<year>[0-9]+)/(?P<month>[0-9]+)/(?P<day>[0-9]+)/$', views.add_workout, name = 'add_workout')

模板:

{% block hidden %}
{% include "workoutcal/liftrow.html" %} {# To be used by Javascript #}
{% include "workoutcal/cardiorow.html" %}
{% endblock %}

<form action="{% url 'add_workout' date.year date.month date.day %}" method="post">

    <div class="row">
        <div class="col-xs-2">
            <p id="date">{{ date.year }}-{{ date.month }}-{{ date.day }}</p>
            <input type="hidden" name="date" value="{{ date }}">
        </div>
    </div>

    <h2 class="col-xs-12">Lifts</h2>
    <div id="liftrows">
        {% for i in range %}
          {% include "workoutcal/liftrow.html" %}
        {% endblock %}
    </div>

    <div class="row">
        <div class="col-xs-0"></div>
        <label class="col-xs-2"><button type="button" id="addliftbutton">One more lift</button></label>
    </div>



    <h2 class="col-xs-12">Cardio</h2>

    <div id="cardiorows">
        {% include "workoutcal/cardiorow.html" %}
    </div>

    <div class="row">
        <label class="col-xs-2"><button type="button" id="addcardiobutton">One more cardio</button></label>
    </div>
    <div class="row">
        <div class="col-xs-10"></div>
        <label class="col-xs-2"><input type="submit" id="submitbutton" value="Save Workout"></label>
    </div>
</form>

JavaScript的:

//Adding onclick to buttons
document.getElementById('addliftbutton').onclick = addLiftRow;
document.getElementById('addcardiobutton').onclick = addCardioRow;

for (var i=0; i<setsBoxes.length; i++){
    setsBox = setsBoxes[i];
    setsBox.onchange = insertRepFields;
}

function addLiftRow(){
    var liftRowElements = document.getElementById('liftrows');

    var hidden_liftrow = document.getElementById('hidden').getElementsByClassName('lift')[0];
    var new_liftrow = hidden_liftrow.cloneNode(true);

    liftRowElements.appendChild(new_liftrow);
}

function addCardioRow(){
    var cardiorows = document.getElementById('cardiorows');

    var hidden_cardiorow = document.getElementById('hidden').getElementsByClassName('cardio')[0];
    var new_cardiorow = hidden_cardiorow.cloneNode(true);

    cardiorows.appendChild(new_cardiorow);
}

function insertRepFields(){} // big function that inserts as many input fields as the number inside the box whose event called the function.

2个问题:1.在Django中还有更好的方法吗? 2.如果这是最好的方法,我该如何将海量格式的数据发送回django? 因为我不知道确切会有多少个字段,所以我不知道如何创建一个接受可变数量的字段以及字段中的字段的表单。

填写表格的外观如下:

在此处输入图片说明

最好的方法是插入具有相同名称的输入,然后在Django中将所有这些输入作为一个列表获得,例如:

def view(request):
    inputs = request.POST.getlist('your_input_name')
    for i in inputs:
        Model.objects.create() # Save your model

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM