Как заполнить HTML-форму значениями базы данных, когда я нажимаю кнопку редактирования?

Question

Я хочу заполнить поля формы значениями базы данных, когда я нажимаю кнопку редактирования. Форма, которую я хочу заполнить, отвечает за обновление атрибутов записи в дневнике (которые включают заголовок и текст).

В настоящее время, когда я нажимаю кнопку редактирования, я получаю пустую форму редактирования. Поэтому, если я хочу сохранить некоторую существующую информацию о записи (например, тело записи), я должен скопировать тело записи в форму редактирования, прежде чем обновлять запись, что является громоздкой задачей.

Как мне реализовать это?

Функция обновления дневниковой записи

function edit_entry(entry_id){
    // open modal to edit diary entry
    var modal = document.getElementById('edit_modal');

    modal.style.display = "block";

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    };
    document.getElementById('edit_modal').addEventListener('submit', updateDetail);

    function updateDetail(e){
        e.preventDefault();
        let title = document.getElementById('title').value;
        let body = document.getElementById('body').value;

        var statusCode;

        fetch('http://localhost:5000/api/v1/entries/'+parseInt(entry_id),{
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + window.localStorage.getItem('token')
            },
            body: JSON.stringify({
                "title": title,
                "body": body,
            })    
        })
        .then((result) => {    
            statusCode = result.status;
            return result.json();
        })
        .then((data) =>{    
            window.alert(data.message);
            modal.style.display = "none";
            redirect: window.location.replace('./viewAllEntries.html');    
        });    
    }    
}

HTML-форма

<form action="" class ="add-content" id="edit_modal">    
    <h2>My Diary | Edit Entry <i class="fa fa-book" aria-hidden="true"></i></h2>

    <div class="form-group">
        <label></label>
        <textarea id = "title" class ="input-control"></textarea>
    </div>

    <div class="form-group">
        <label></label>
        <textarea id = "body" class ="input-control">  </textarea>
    </div>

    <div class ="form-group">
        <label>&nbsp</label>
        <button type = "submit" class ="button button-block" />Save <i class="fa fa-floppy-o" aria-hidden="true"></i></button>
    </div>
</form>

Answer 1

Когда вы открываете модальное просто захватите данные для записи из вашего API. Попробуйте что-то вроде кода ниже.

$ yourUrlToFetchTheData должен быть URL-адресом маршрута API для получения необходимых данных.

fetch($yourUrlToFetchTheData, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + window.localStorage.getItem('token')
        }
    })
    .then((result) => {
        // TODO FILL THE TEXTAREAS WITH THE VALUES OF THE RESULT.
        $("title").text(result.json.title);
        $("body").text(result.json.body);

    })
    .then((data) => {
        // TODO DO SOMETHING WITH THE ERROR.
    });

Поставьте этот код после modal.style.display = "block"; и немного измените его!