author

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery AJAX Submit Form</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
var authorID;
// https://www.geeksforgeeks.org/how-to-submit-a-form-using-ajax-in-jquery/
$(document).ready(function(){                   // website is loaded

    const qs = window.location.search;
    const parms = new URLSearchParams(qs);
    const aid = parms.get(`aid`);

    //event.preventDefault();

    $.ajax({
                method: "GET",
                url: '/authorg',
                cache: false,
                data : {'id' : aid},
                success: function(data) {
                    // Ajax call completed successfully
                    
                    author = JSON.parse(data);
                    
                    authorID = author.au_id;
                    document.getElementById("fancytitle").innerHTML = 'Data for ' + author.au_fname + ' ' + author.au_lname;
                    document.getElementById("fname").value = author.au_fname;
                    document.getElementById("lname").value = author.au_lname;
                    document.getElementById("pnumber").value = author.phone;
                    document.getElementById("adr").value = author.address;
                },
                error: function(data) {
                      
                    // Some error in ajax call
                    alert(data);
                }
    });
    
});

class au
{
    constructor(id, fname, lname, number, address)
    {
        this.id = id;
        this.fname = fname;
        this.lname = lname;
        this.number = number;
        this.address = address;
    }
}


function applyClick()
{
    var fn = document.getElementById("fname").value;
    var ln = document.getElementById("lname").value;
    var num = document.getElementById("pnumber").value;
    var adr = document.getElementById("adr").value;
    
    var author = new au(authorID, fn, ln, num, adr);

    var auJSON = JSON.stringify(author);

    $.ajax({
                method: "POST",
                url: '/authorp',
                cache: false,
                data : {'au' : auJSON},
                success: function(data) {
                    // Ajax call completed successfully
                    console.log(data);
                    var $url = `/`;
                    window.location = $url;
                },
                error: function(data) {
                      
                    // Some error in ajax call
                    alert(data);
                }
    });

}

</script>

<style></style>

</head>

<body>
    <b><label id="fancytitle"> </label></b>
    <div>
        <br>
        <label>First Name:</label><br>
        <input type="text" id="fname" name="fname"><br><br>
        <label>Last Name:</label><br>
        <input type="text" id="lname" name="lname"><br><br>
        <label>Phone #:</label><br>
        <input type="text" id="pnumber" name="pnumber"><br><br>
        <label>Address:</label><br>
        <input type="text" id="adr" name="adr"><br><br>
        <button onclick=applyClick()> Apply Changes </button>
    </div>
</body>
</html>