I need help making a dynamic value attribute for html text fields

Question

I'm looking for help with a very particular topic. I'm trying to change the default value inside a text field by using document.getElementById , however I'm not having very much luck.

The reason I have $name described below the script, is because the entire thing is inside a for loop to create a list of these names. When it calls the functions, it has no issue looking for the element ids because they're already created.

this code uses a mixture of php & html (you'll see a $dataarray[$i]['AI'] , that's an auto-incrementing number used for pointing to the right info):

<?php
    $name = "";
if($owner == 1)
{
    $btnEdit = '<span id="btnEdit'.$dataarray[$i]['AI'].'"><button type="button" onclick="EditName('.$dataarray[$i]['AI'].', \''.$dataarray[$i]['lastname'].'\', \''.$dataarray[$i]['firstname'].'\');">Edit Name</button></span>';
    ?><script>
    function EditName(logai, lastname, firstname)
    {
        window.stop();
        var btnEditID = "btnEdit" + logai;
        var editNameID = "editName" + logai;
        document.getElementById(editNameID).innerHTML = '<input type="text" id="Lname" value="'+lastname+'" size="10">, <input type="text" id="Fname" value="' + firstname + '" size="10">';
        document.getElementById(btnEditID).innerHTML = '<button type="button" onclick="SubmitName('+logai+', \''+lastname+'\', \''+firstname+'\');">Submit Name</button>  <button type="button" onclick="CancelEdit(\''+btnEditID+'\', \''+editNameID+'\', '+logai+', \''+lastname+'\', \''+firstname+'\');">Cancel Edit</button><br>';
    }
    function SubmitName(logai, lastname, firstname)
    {
        // old: lastname = document.getElementById(Lname).value;
        lastname = Lname.value;
        // old: firstname = document.getElementById(Fname).value;
        firstname = Fname.value;
        // Don't worry about the ajax code, I made sure it works:
        //     it just updates the record at the given incrementing number
        $.ajax({ type:'POST',
            url:'/bin/editPersonName.php',
            data:{ai:logai, fname:firstname, lname:lastname},
            success:function(data2){
                console.log(data2);
            }
        });
//      location.reload();
    }
    function CancelEdit(btnEditID, editNameID, logai, lastname, firstname)
    {
        document.getElementById(btnEditID).innerHTML = '<button type="button" onclick="EditName('+logai+', \''+lastname+'\', \''+firstname+'\');">Edit Name</button>';
        document.getElementById(editNameID).innerHTML = '<input type="text" name="Name" value="'+lastname+', '+firstname+'" readonly>';
        // There is no way to turn refresh back on, so we simply have to reload the page
        location.reload();
    }
    </script><?php
    $name = '<span id="editName'.$dataarray[$i]['AI'].'"><input type="text" name="Name" value="'.$dataarray[$i]['lastname'].', '.$dataarray[$i]['firstname'].'" readonly></span>';
}

The order of progression goes as follows:

1) See the name pop up in a name text field, with an edit button next to it

2) Notice name is spelled wrong, so click the edit button

3) Edit button clicked, it turns into 2 buttons (a submit button, and a Cancel button) while the name field turns into two text fields separated by a comma (a lastname, firstname orientation)

4) Type into the text fields what changes you want, then click the Submit button

5) Submit button takes the new text from the two text fields and updates the name at the given ai location (this is where I have the issue; it doesn't get the new stuff typed inside the lastname, firstname fields)

6) Page reloads to do a few things: update the information filled in, reset the field layout, and "turn on" the page's auto-refresh (I have location.reload() commented to see the message it returns upon ajax; which is just a pass/fail message)

(note: I apologize if there's a paragraph placed in the wrong location, I'm in a bit of a time crunch and I didn't have enough time to check for literature sensibility this morning)

Answer 1

The document.getElementById() function's parameter must be a string but you provide undefined variables to it.

lastname = document.getElementById('Lname').value;
firstname = document.getElementById('Fname').value;

Answer 2

Update: After typing document.getElementById(Lname) and Lname into the dev tools' console, I had an idea: What would happen if I just set lastname & firstname to Lname.value & Fname.value ? What happens is that it fixes my issue (my coworker was the one who made me think of it, as he wanted to see what typing the getElementById in console would do). It may have been a scope issue that was causing it, but this is definitely a step people should take from my mistake:

If the Element is coming back as null when searched by document, try looking at the value in your browser's console. If something doesn't add up to you, try going one step inwards.