CODEWITHSUNDEEP
pythonhtmlmysqldjangodatabase
Sorin Burghiu
Sorin Burghiu

Reputation: 779

Python Django Edit HTML rows and update database

I have a table and I wish to add an edit button that updates the certain record both visually and in the database.

The HTML I have.

{% for work_entry in work_entries %}
                {% if work_entry.date == date.date %}
                <form action="{% url 'work_entries:object_edit' work_entry.id %}" method="post">
                    {% csrf_token %}
                <tr>
                    <td>
                            <button onclick="return confirm('Are you sure you want this edit?')">Edit
                            </button>
                            </td>
                    <td> <form action="{% url 'work_entries:object_delete' work_entry.id %}" method="post">
                            {% csrf_token %}
                            <button onclick="return confirm('Are you sure you want to delete this record?')">Delete
                            </button>
                            </form>
                            </td>
                    <td>{{ work_entry.id }}</td>
                    <td><input type="text" value="{{ work_entry.description }}" name="description"></td>
                    <td><input type="number" value="{{ work_entry.num_hours }}" name="hours"></td>
                </tr>
                </form>
                {% endif %}
            {% endfor %}

The views.py

def object_edit(request, object_id):

    record = get_object_or_404(WorkEntry, pk=object_id)

    if request.method == "POST":
        record.description = request.POST["description"]
        record.num_hours = request.POST["hours"]
        record.save()
        return redirect("/employeePage")

    return render(request, "employeePage.html")

And urls.py

app_name = "work_entries"

urlpatterns = [
    path("", views.employee_view, name="employeePage"),
    url(r"^delete/(?P<object_id>[0-9]+)/$", views.object_delete, name="object_delete"),
    url(r"^edit/(?P<object_id>[0-9]+)/$", views.object_edit, name="object_edit"),
]

I used an input tag in the as I thought that would allow me to change data and save it. However this is giving me MultiValueDictKeyError at /employeePage/edit/14/ 'description' error. I am not too experienced with jquery which from research I saw that could work but I don't seem to get it right. Can someone help or even suggestions on how I should approach this would be useful.

Note: there is already a button to delete the record which works, I tried a similar approach for editing, but it doesn't work.

Upvotes: 0

Views: 1181

Answers (1)

Tartempion34
Tartempion34

Reputation: 600

I fully encourage you to use the forms provided by Django, it will make your life easier.

And I fully encourage you as well to not use a form for your delete stuff, it should be a simple link, it would avoid to have a form in a form. I think your problem is here. Having a form in a form with the button in the middle make impossible for your browser to know which parts of the form you want to submit.

As well you have two buttons but none of them is submit type.

If you don't want to use the Django forms a way to do it would be


{% for work_entry in work_entries %}
    {% if work_entry.date == date.date %}
        <form action="{% url 'work_entries:object_edit' work_entry.id %}" method="post">
        {% csrf_token %}
                <tr>
                    <td>
                        <button>
                            <a href="{% url 'work_entries:object_delete' work_entry.id %}" onclick="return confirm('Are you sure you want this edit?')">Delete</a>
                        </button>
                    </td>
                    <td>                                    <button type="submit"           onclick="return confirm('Are you sure you want to update this record?')">
                            Update
                        </button>
                    </td>
                    <td>{{ work_entry.id }}</td>
                    <td><input type="text" value="{{ work_entry.description }}" name="description"></td>
                    <td><input type="number" value="{{ work_entry.num_hours }}" name="hours"></td>
                </tr>
        </form>
    {% endif %}
{% endfor %}

It's not the most beautiful way to do it I tried to keep your achitecture

Upvotes: 2

Related Questions