Place text in a texbox using innerHTML

Question

I would like to place the text from the fname variable from the updatelist function into the textbox with the id firstname. I believe this needs to be done using innerHTML as it is a result from an SQL database.

HTML:

<fieldset>
            <legend><b>Details</b></legend>
            <label>First Name: </label><input type = "text" id="firstname" readonly><br><br>
            <label>First Name: </label><input type = "text" id="lastname" readonly><br><br>

    </fieldset>

    <fieldset>
        <legend><b>Information</b></legend>
        <label> Current date:</label>
        <input type="text" id="datelate"/><br><br>
        <label> Detention date:</label>
        <input id = "detentiondate" type="date" ><br><br>
        <label>Time</label>
            <select id="mora">
                <option value="AM">Morning</option>
                <option value="PM">Afternoon</option>
            </select>
        <br> <br>
        <label> Reason:</label>
        <textarea id = "reason" rows="2" cols="60"></textarea><br><br>
    </fieldset>

    <br>
    <input type="reset" value="Reset">

    <button type="button" id="addlate" onclick="addLate();">Add late</button>

    </body>

Javascript:

 <script>

    if (window.openDatabase) {
        var mydb = openDatabase("students2_db", "0.1", "A Database of Students", 1024 * 1024);

    mydb.transaction(function (t) {
         t.executeSql("CREATE TABLE IF NOT EXISTS student (id INTEGER PRIMARY KEY ASC, fname TEXT, lname TEXT, mclass TEXT, aclass TEXT, com TEXT, lates INTEGER DEFAULT 0)");
         t.executeSql("CREATE TABLE IF NOT EXISTS lates (lid INTEGER PRIMARY KEY ASC, flname TEXT, llname TEXT, time TEXT, reason TEXT, date TEXT, nextdet TEXT)");
    });

} else {
    alert("WebSQL is not supported by your browser!");
}

function getname() {
    mydb.transaction(function (t) {
         t.executeSql("SELECT fname FROM student WHERE id = ?", [localStorage.id], updateList);
    });
}

function getname2() {
    mydb.transaction(function (t) {
         t.executeSql("SELECT lname, lname FROM student WHERE id = ?", [localStorage.id], updateList2);
    });
}

function updateList(transaction, results) {
    //initialise the listitems variable
    var listitems = "";
    //get the car list holder ul
    var listholder = document.getElementById("firstname");

    //clear cars list ul
    listholder.innerHTML = "";

    var i;
    //Iterate through the results
    for (i = 0; i < results.rows.length; i++) {
        //Get the current row
        var row = results.rows.item(i);

listholder.innerHTML += "<b> First Name: </b> " + row.fname; }

}

Answer 1

You need to use the "value" property to do this.

In this case,

document.getElementById("firstname").value = fname;