How can I load values into the form from the desired table row by clicking?

Using Django Forms & APIs
1

Good day! I plan to build a mini application. Which consists of one page (the main one) - a template. And also one secondary page - on the second page I fill in information into the model table through a form. On the other page (the main one) - I display information in the form of a table. I plan to place the form next to the table. The most difficult thing is that in this form I would like to receive data and write/send data from a specific table row.

For example, I click on an element in a table row and information appears in the form - the contents of this row that I clicked or pressed.

Information appears loaded in the form, values ​​from the table row - which can then be edited and the data can be written back into the table model.

Can you think of something about this? I would be very grateful for any tips and help.

table.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>
<body>
    <div>
        <h4>Мероприятия</h4>
    </div>
    <br/>
    <div>
        <form method="GET" action="{% url 'table' %}">
            {{ form.as_p }}
            <input type="submit" value="Submit" class="button" />
        </form>
    </div>
    <br/>
    <div>
        <table style="font-family: Arial, Helvetica, sans-serif; font-size: small;">
            <thead>
                <tr>
                    {% for col in table.columns %}
                    <th>
                        {{ col }}
                    </th>
                    {% endfor %}
                </tr>
            </thead>
            {% for index, row in table.iterrows %}
            <tr>
                {% for cell in row %}
                <td style="text-align: center;">
                    {{ cell }}
                </td>
                {% endfor %}
            </tr>
            {% endfor %}
        </table>    
    </div>
    <br/>
    <hr/>
    <div>
        <ul>
            {% for book in books %}
                <li>
                    <a href="{% url 'book-detail' book.pk %}">{{ book.nameobject }}</a>
                </li>
            {% endfor %}
        </ul>
    </div>
    <br/>
    <hr/>
    <div>
        <table>
            <thead>
                <tr>
                    <th>ОМСУ</th>
                    <th>Наименование объекта</th>
                    <th>Тип объекта</th>
                    <th>Объём финансирования</th>
                    <th>Подрядчик</th>
                </tr>
            </thead>
            <tbody>
                {% for book in books %}
                <tr>
                    <td>{{ book.city }}</td>
                    <td >
                        <a href="{% url 'book-detail' book.pk %}">{{ book.nameobject }}</a>
                    </td>
                    
                    <td>{{ book.typeobject }}</td>
                    <td>{{ book.budget }}</td>
                    <td>{{ book.podryadchik }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    
</body>
</html>

views.py

def table(request):
    context = {}

    book_filter = BookFilter(request.GET, queryset=ArkiObject_1.objects.all())
    
    table_2 = book_filter.qs

    context['form'] = book_filter.form

    
    table = pd.DataFrame.from_records(table_2.values("city", "nameobject", "typeobject", "budget", "podryadchik"))

    context['table'] = table

    context['books'] = table_2

    return render(request, "table.html", context)


def book(request, pk):

    context = {}
    form_2 = Form_GPR(request.POST or None)
    if form_2.is_valid():
        model_instance = form_2.save(commit=False)
        value_work = model_instance.work
        value_peoples = model_instance.peoples
        value_pk = pk
        new_entry = ArkiGpr(name=value_pk, work=value_work, peoples=value_peoples)
        new_entry.save()

        return redirect("book-detail", pk)
    context['form_2'] = form_2

    """ Gets an individual book object from the database, based on its ID/PK. Renders a detail template """
    book = get_object_or_404(ArkiObject_1, pk=pk)

    context['book']  = book

    filter_qs = ArkiGpr.objects.filter(name=pk)
    filter_qs = filter_qs.values("work", "peoples")

    context['books'] = filter_qs
    return render(request, 'bookdetail.html', context)
2

You need to decide whether you’re going to do this as a full-page reload or a page-update.

If you want this to be handled as a full page refresh, then you could pass the id of the element to be displayed as either a url parameter or as a query parameter added on to the url when issuing the request.

If you want this to perform a page update (not a complete page reload), then you would need to issue a similar request as an AJAX-style call to a view dedicated for this purpose, and update the page accordingly.
This can be done a number of different ways. You could have your special view return just the data to use to populate the form and then have your JavaScript inject that data into the HTML form.
Or, you could have the server render the complete div containing the form and have the JavaScript replace that div. (This is what HTMX does.)

3

FYI: I strongly prefer having the server, in response to an AJAX request, “render and return the entire div.” The JavaScript response handler (one generic subroutine, used everywhere) simply replaces the HTML. The versatility of this is that it’s simple, and the server (templates) continue to be solely responsible for what gets displayed in all cases.