I’m retrieving information about “resources” from a MySQL database using PHP. The information about each resource is output as HTML in a format like the following:
Title
Description
Etc.
Each resource then has an “edit” link which runs JavaScript onclick. This JS inserts a form containing the selected resource’s information, to be edited and updated in the database. If JavaScript is disabled, the user is brought to a separate page which has only the form to edit that particular resource. So, my question: How do I manage an arbitrary number of forms on the same page that all have the same function, just pertain to different rows of a MySQL database (different “resources”)? Particularly, how would I identify the particular resource to be edited in the form inserted by Javascript?
Right now I’m using a hidden input to carry the resource id (erid), but what would the PHP script look like which actually handles the form action? This problem arises because every name for input type=”submit” currently carries the erid, e.g. name=”update1″, name=”update2″, etc.
To retrieve resources from database:
require('inc/db_connect_info.config');
$mysqli = new mysqli($host, $mysqlilogin, $mysqlipassword, $databaseName);
if ( mysqli_connect_error() ) {
die("Can't connect to database: " . mysqli_connect_error() );
}
else{
$testQuery = "SELECT * FROM eresources NATURAL JOIN subjects";
$testResult = $mysqli->query($testQuery);
if($testResult && $testResult->num_rows >= 1) {
while($testArray = $testResult->fetch_assoc() ) {
$testArray['stitle'] = htmlentities($testArray['stitle']);
// START er div
print("<div id=\"er".$testArray['erid']."\" class=\"grey\">"); print("\n\n\t");
// erid, link, title, descr
print("<p>".$testArray['erid'].": <a id=\"link".$testArray['erid']."\" href=\"".$testArray['link']."\">".$testArray['ertitle']."</a> - <span id=\"descr".$testArray['erid']."\">".$testArray['descr']."</span></p>");
print("\n\t");
// edit "link"
print("<a href=\"edit.php?erid=".$testArray['erid']."\" onclick=\"return showEdit(".$testArray['erid'].")\">Edit</a>");
print(" ");
// END er div
print("</div>");
print("\n\n");
}
}
// If there was a problem retrieving resources, print an error message //
else{
print("<p>No e-resources found!</p>");
}
$mysqli->close();
}
JavaScript function to insert update form right there on page if “edit” link is clicked
(assuming JavaScript is enabled):
function showEdit(erid) {
//get page url for form submission
var url = document.location.href;
//current title
var erTitle = document.getElementById("link" + erid).innerHTML;
//current link
var erLink = document.getElementById("link" + erid).getAttribute("href");
//current description
var erDescr = document.getElementById("descr" + erid).innerHTML;
//current subject under which electronic resource is filed
var erSubject = document.getElementById("subject" + erid).innerHTML;
//clear the er div
document.getElementById("er" + erid).innerHTML = "";
//then fill it with a form for new values, to be submitted to the same page
//the form is prepopulated with the current values from the database
document.getElementById("er" + erid).innerHTML =
"<form action=\"" + url + "\" method=\"post\">" +
"Title<br /><input type=\"text\" name=\"updated_er_title"+erid+"\" value=\"" + erTitle + "\" size=\"100\" /><br /><br />" +
"Link<br /><input type=\"text\" name=\"updated_er_link"+erid+"\" value=\"" + erLink + "\" size=\"100\" /><br /><br />" +
"Description<br /><textarea name=\"updated_er_descr"+erid+"\" cols=\"75\" rows=\"10\">" + erDescr + "</textarea><br /><br />" +
"Free Status<br />" + erFree + "<br /><br />" +
"Subject<br /><input type=\"text\" name=\"updated_er_subject"+erid+"\" value=\"" + erSubject + "\" size=\"100\" /><br /><br />" +
"<input type=\"hidden\" name=\"erid\" value=\""+erid+"\" />" +
"<input type=\"submit\" name=\"update" + erid + "\" value=\"Update\" />" +
"</form>";
// return false so the link is not followed if javascript is enabled
// if javascript is disabled, link provides same form on separate page
return false;
}
Do you really need to have a separate form for each resource? Why not have one form, set inside a div. When the user clicks “edit”, the onclick handler would then populate the fields in the form with the data for the selected resource, place the div in the location where it needs to be for the selected resource and set its css display to ‘block’. The form can contain a hidden input, which would be set to the resource ID. When the form is submitted, the server-side PHP would have the resource’s ID to do the DB update. If the form is submitted using AJAX, then onsubmit handler can take the data from the input fields and modify the non-editable display for the selected resource, then set the form div’s css display to ‘none’.