How to scroll lock a Django HTML Web Page-CodePudding

I am currently using a page that has a list of in-line forms

However when the user enters submits each form (line) they are sent back to the top of the page. This becomes really tedious as the users need to enter data quickly and can't when they need to scroll for 2 minutes every time they add an entry.

Does anyone know how to implement a scroll lock to stock this from happening

Views.py: Function:

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 page :

{% 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>

CodePudding user response：

If I understand correctly, you can add #<some_id> to the action attribute of your forms and when the page loads the browser will automatically put the element with the id="some_id" in view.

Example:

<form id="form1" action="#form2" method='POST'>...</form>
...
<form id="form2" action="" method='POST'>...</form>

If you submit #form1 when the page reloads the browser will scroll to #form2 even if it's at the bottom of the page.

Or if you only have one form, you can do:

<form id="form1" action="#form1" method='POST'>...</form>

EDIT:

<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 %} >