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)
