Update - Changing a Record

To update a record, you need two things: which record to change (the UUID, sent as a URL parameter), and what to change it to (the new values, sent in the request body). PUT carries both.

---

Reading the id from a button

When you built the table rows in the previous page, each Edit button got a data-id attribute:

<button data-id="f47ac10b-..." onclick="editPatient(this)">Edit</button>

When the user clicks it, this refers to the button. You read the id back like this:

function editPatient(button) {
    let id = button.dataset.id
    console.log("Editing patient:", id)
}

button.dataset.id reads the data-id attribute. That is how you know which patient to update.

---

Pre-filling the form

A good edit flow shows the user what the current values are before they change them. You can fetch the current patient's data and fill the form fields:

function editPatient(button) {
    let id = button.dataset.id

    fetch("/patients/" + id)
        .then(response => response.json())
        .then(patient => {
            document.getElementById("name").value = patient.name
            document.getElementById("age").value  = patient.age
            document.getElementById("edit-id").value = patient.id
        })
}

edit-id is a hidden input field in your form that stores the id while the user edits:

<input type="hidden" id="edit-id">

---

Sending the PUT request

When the user clicks Save, read the id from the hidden field and send a PUT request:

function saveUpdate() {
    let id   = document.getElementById("edit-id").value
    let name = document.getElementById("name").value
    let age  = document.getElementById("age").value

    fetch("/patients/" + id, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: name, age: parseInt(age) })
    })
        .then(response => response.json())
        .then(result => {
            document.getElementById("edit-id").value = ""
            loadPatients()
        })
        .catch(error => console.log("Error:", error))
}

The URL /patients/ + id puts the UUID into the path. Flask captures it as a URL parameter.

---

The Flask route

@app.route('/patients/<string:id>', methods=['PUT'])
def update_patient(id):
    data = request.get_json()
    Patient.objects.filter(id=id).bulk_update(
        name=data["name"],
        age=data["age"]
    )
    return jsonify({ "status": "ok" })

filter(id=id) finds the record with that UUID. bulk_update() sets the new values. The change is permanent immediately.

---

Updated templates/index.html form section

Add a Save button alongside the Add button, and the hidden id field:

<input type="hidden" id="edit-id">
<input id="name" type="text"   class="form-control mb-2" placeholder="Name">
<input id="age"  type="number" class="form-control mb-2" placeholder="Age">
<button onclick="addPatient()"  class="btn btn-primary me-2">Add Patient</button>
<button onclick="saveUpdate()"  class="btn btn-success">Save Update</button>

---

Challenge

Add the PUT route to app.py and the editPatient() and saveUpdate() functions to your template. Click Edit on a patient, change their name, click Save Update, and watch the table refresh with the new name - without reloading the page.

---

← Read - Getting Data Back    Next: Delete - Removing a Record →