我目前正在使用一个页面，其中有一个内联表单列表
然而，当用户输入提交每个表单(行)时，它们被发送回页面的顶部。这变得非常乏味，因为用户需要快速输入数据，而当他们每次添加条目都需要滚动2分钟时，就不能这样做了。
有没有人知道如何实现滚动锁来防止这种情况发生?
Views.py:功能:
class AvonleaView(View):
def get(self,request):
created_nums= AvonleaClass.objects.all().values('unitNumber')
Aprev = AvonleaClass.objects.all().order_by('-unitDateEntered')
# created_nums= AvonleaClass.objects.all()
print(created_nums )
created_nums =[int(i['unitNumber']) for i in created_nums]
print(created_nums )
form = AvonleaForm()
return render(request,"meter_readings/avonlea.html",{'form':form , 'created_nums':created_nums })
def post(self,request):
created_nums= AvonleaClass.objects.all().values_list('unitNumber')
print(created_nums)
form = AvonleaForm(request.POST)
if form.is_valid():
form.save()
return redirect('Avonlea')
messages.success(request , 'creates successfully ')
else:
return render(request, 'meter_readings/avonlea.html', {'form': form , created_nums:created_nums })
HTML页面:
{% extends 'meter_readings/base.html' %}
{% block content %}
<!-- CSS only -->
<div class="container" font-size= 8px>
<center><h1>Avonlea Meter Readings</h1></center>
<br>
<head>
<meta name="viewport" content="width=device-width">
</head>
{% for unit_number in form.unitNumber %}
<h6>{{ error }}</h6>
<form class="form-group mt-4" method="post" {% if unit_number.data.value in created_nums %} style="background-color: rgb(231, 224, 224); " {% endif %} >
{% csrf_token %}
<div class="container">
<div class="row mb-3">
<div class="col">
<h5 style="font-size: 14px"> Unit number </h5>
{{ unit_number.data.value}}
</div>
<input type="hidden" name="unitNumber" value="{{unit_number.data.value}}">
<div class="col" id="prev{{unit_number.data.value}}" >
<h5 style="font-size: 14px"> Previous Reading </h5>
{{ previousReading }}
</div>
<div class="col" id="readings{{unit_number.data.value}}">
<h5 style="font-size: 14px"> Current Reading </h5>
{{ form.newReading }}
</div>
<div class="col" id="difference{{unit_number.data.value}}">
<h5 style="font-size: 14px"> Units Used </h5>
{{ form.difference }}
</div>
<div class="col" id="img{{unit_number.data.value}}">
{{ form.image }}
</div>
<div class="col">
<button id="form.id" class="btn btn-success " type="submit" {% if unit_number.data.value in created_nums %} disabled {% endif %} > Save</button>
</div>
</div>
</div>
</form>
{% endfor %}
<br>
<br>
如果我理解正确的话，您可以将#<some_id>添加到表单的action属性中，当页面加载时，浏览器将自动将具有id="some_id"的元素置于视图中。
的例子:
<form id="form1" action="#form2" method='POST'>...</form>
...
<form id="form2" action="" method='POST'>...</form>
如果你提交#form1时，页面重新加载浏览器将滚动到#form2，即使它在页面的底部。
或者如果你只有一个表单，你可以这样做:
<form id="form1" action="#form1" method='POST'>...</form>
编辑:
<form id="form{{forloop.counter0}}" action="#form{{forloop.counter}}" class="form-group mt-4" method="post" {% if unit_number.data.value in created_nums %} style="background-color: rgb(231, 224, 224); " {% endif %} >