Filling/Updating the form dynamically on the page

Hi, in my project with BMI calculator (with database) the part of my code in template bmi.html looks like this:

<div class="form-style">
    <form method="post">
        {% csrf_token %}
        <h2>BMI Calculator</h2>
        {% if user.is_authenticated %}
        <button type="button" class="btn btn-info" style="color:white">CLICK IF YOU WANT TO FILL OUT THE FORM WITH LAST SAVED DATA</button>
        {% endif %}
        <p>{{ form.height.label }}{{ form.height }}<br></p>
        <p>{{ form.weight.label }}{{ form.weight }}<br></p>
        <p>{{ form.gender.label }}{{ form.gender }}<br></p>
            <input type="submit" class="btn btn-primary my-btn" value="Calculate" />
            <input type="reset" class="btn btn-danger my-btn" value="Clear" />

If user presses the btn-info button, I want to fill out the form with the last data saved in the user’s account in models. How can I accomplish it? Do I need to use AJAX?

Yes, that’s one way to do it. You could write the JavaScript to retrieve the data as JSON to populate those fields. Or you could write the JavaScript to retrieve the entire form as an html fragment and replace the html for the fields. In either of these two cases you’re likely going to need to write another view as well to return the appropriate data.

Or, that button could be a link where it does a full-page refresh with the data pre-loaded. In this case, it could be the same view that accepts a parameter to indicate whether the data should be pre-loaded or not.

Any of these methods will work.