Javascript Django:如何创建一个在用户单击时更改的动态表单?
我正在制作一个训练日历网站,用户可以在其中添加不同提升量、设置和重复次数等的训练。因此,我需要一个表单,在用户单击按钮时添加一个字段。我制作了一个模板和一些javascript来描述我想要实现的目标: 网址:Javascript Django:如何创建一个在用户单击时更改的动态表单?,javascript,python,html,django,Javascript,Python,Html,Django,我正在制作一个训练日历网站,用户可以在其中添加不同提升量、设置和重复次数等的训练。因此,我需要一个表单,在用户单击按钮时添加一个字段。我制作了一个模板和一些javascript来描述我想要实现的目标: 网址: url(r'^add/(?P[0-9]+)/(?P[0-9]+)/(?P[0-9]+)/$),views.add_锻炼,name='add_锻炼') 模板: {% block hidden %} {% include "workoutcal/liftrow.html" %} {# To
url(r'^add/(?P[0-9]+)/(?P[0-9]+)/(?P[0-9]+)/$),views.add_锻炼,name='add_锻炼')
模板:
{% 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>
{%block hidden%}
{%include“workoutcal/liftrow.html”%}{{#由Javascript使用#}
{%include“workoutcal/cardiorow.html”%}
{%endblock%}
{{date.year}-{{date.month}-{{date.day}
提起
{范围%中的i的%1}
{%include“workoutcal/liftrow.html”%}
{%endblock%}
再来一次
有氧运动
{%include“workoutcal/cardiorow.html”%}
再来一次有氧运动
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.
//将onclick添加到按钮
document.getElementById('addliftbutton')。onclick=addLiftRow;
document.getElementById('addcardiobutton')。onclick=addCardioRow;
对于(var i=0;i实现这一点的最佳方法是插入具有相同名称的输入,然后在Django中以列表形式获取所有这些输入,如:
def view(request):
inputs = request.POST.getlist('your_input_name')
for i in inputs:
Model.objects.create() # Save your model
谢谢你的回答。你说的“插入同名输入”是什么意思?@Sandi当你通过POST方法发送输入时,你用属性名
标识输入,这样在后端你就可以将其作为字典获取,如果有多个输入,你将收到一个列表
def view(request):
inputs = request.POST.getlist('your_input_name')
for i in inputs:
Model.objects.create() # Save your model