I am using a combination of php and Javascript to create forms that allow users to edit entries from a MySQL db. Here is the php I have...
Code:
<form id=\"form$id\" name=\"form$id\" method=\"POST\" action=\"viewmyfsj.php?a=edit&id=$id\">
<tr bgcolor='$row_color'>
<td width=\"5%\" align=\"center\">
<input id=\"Edit$id\" name='edit' type='button' value='Edit' onclick='change($id);'/></td>
<td align='center' width='13%'>$dateint</td>
<td align='center' width='21%'>
<a href=\"restaurants.php?id=$restaurant\" title=\"View all entries from $restaurant\"><div id='restaurantNode$id'>$restaurant</div></a><span id='restauranttextbox$id'></span></td>
<td align='center' width='22%'>
<a href=\"similarfoods.php?searchquery=$food\" title=\"View similar food entries\"><div id='foodNode$id'>$food</div></a><span id='foodtextbox$id'></span></td>
<td align='center' width='13%'>
<div id='sensitiveNode$id'>$sensitive</div><span id='sensitivetextbox$id'></span></td>
<td align='center' width='21%'><div id='notesNode$id'>$notes</div><span id='notestextbox$id'></span></td>
<td align='center' width='5%' ><div id='xNode$id'><a href=\"viewmyfsj.php?a=deleterestentry&deleteid=$id&view=$view\" title=\"Delete this entry?\"> <deletex>x</deletex></a></div><span id='deletetextbox$id'></span></td>
</tr>
</form>
[code]
And for the Javascript...
Code:
<script type="text/javascript">
function change(i) {
// create textboxes
var editRestaurant = document.createElement("input");
var editFood = document.createElement("input");
var editissensitive = document.createElement("input");
var editNotes = document.createElement("input");
var editSubmit = document.createElement("input");
// disable edit button
document.getElementById('Edit'+i).disabled = true;
//Assign different attributes to the element.
editRestaurant.setAttribute("type", "text");
editRestaurant.setAttribute("value", document.getElementById('restaurantNode'+i).firstChild.nodeValue);
editRestaurant.setAttribute("name", "editrestaurant");
editFood.setAttribute("type", "text");
editFood.setAttribute("value", document.getElementById('foodNode'+i).firstChild.nodeValue);
editFood.setAttribute("name", "editfood");
editissensitive.setAttribute("type", "text");
editissensitive.setAttribute("value", document.getElementById('sensitiveNode'+i).firstChild.nodeValue);
editissensitive.setAttribute("name", "editissensitive");
editNotes.setAttribute("type", "text");
// check to see if notes is empty
if (document.getElementById("notesNode"+i).firstChild == null)
editNotes.setAttribute("value", "");
else
editNotes.setAttribute("value", document.getElementById('notesNode'+i).firstChild.nodeValue);
editNotes.setAttribute("name", "editnotes");
editSubmit.setAttribute("type", "button");
editSubmit.setAttribute("value", "Save");
editSubmit.setAttribute("name", "editSubmit");
editSubmit.setAttribute("onclick", "submitform("+i+")");
// make text disappear
document.getElementById('restaurantNode'+i).style.display = 'none';
document.getElementById('foodNode'+i).style.display = 'none';
document.getElementById('sensitiveNode'+i).style.display = 'none';
document.getElementById('notesNode'+i).style.display = 'none';
document.getElementById('xNode'+i).style.display = 'none';
document.getElementById('restauranttextbox'+i).appendChild(editRestaurant);
document.getElementById('foodtextbox'+i).appendChild(editFood);
document.getElementById('sensitivetextbox'+i).appendChild(editissensitive);
document.getElementById('notestextbox'+i).appendChild(editNotes);
document.getElementById('deletetextbox'+i).appendChild(editSubmit);
}
function submitform(i)
{
var myform = "form"+i;
document.myform.submit();
}
</script>
The problem is that the form is not submitting. I think it has to do with the fact that the input fields are created dynamically. Do you know of a way around this?
Thanks!
Before you post, read our: 
