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>

单击编辑按钮时，如何用数据库值填充表单字段？

0 个答案: