jQuery, PHP, and Forms
I decided to put up a quick post on how I have been using jQuery and PHP to process forms for me very easily. To get started, let me give you a background on what I have been trying to do. I have a page with a list of info, and I wanted to give the user the option of editing that info using jQuery's built in dialog box because it is awesome looking. There were a few ways to go about doing this, which is what I am going to describe.
This is the goal!
I click the link
A dialog box pops up
The text boxes have info filled in already
Something like this:
Name:
I can edit it, then submit it
I want the code to be small
The first way that I thought of was to create a form for every piece of info I pulled from the database. So lets say for ID=1, there would be 1 form with all the info preloaded into it. ID=2 would be a separate form with all different info. This works, but I had to have about 20 dialog boxes per page, and it would cause the HTML output to be about 20 times larger than I needed.
In my head, I knew there had to be a way to do this with DHTML and jQuery, and I finally figured it out. All I had to do was create a value and store it in the button that I was already using (well it was actually just a link). So I turned <a href="#" class="editThis">Edit!</a> into <a href="#" class="editThis" id="1">Edit!</a>. I used PHP to echo out the data already but now each link will have a different ID:
echo "<a href=\"#\" class\"editThis\" id=\"$row[UserId]\">Edit!</a>";
So now we have 20 links, each looking the same, but each with a unique ID. This is where jQuery comes in handy. We can look up the anchor by class, and then store the ID as a variable for later use!
$(".editThis").click(function{
var id=$(this).attr('id');
});
So now we have the ID of the info we want to manipulate. The next part was a little more difficult to figure out. I want only 1 dialog box and 1 form, but want the info auto filled. At first I was thinking we needed to do a lot of AJAX to pull out each and every variable that we want to edit, but then I figured out we could pass that info into HTML as a “HIDDEN” variable. HTML is great because you can hide all sorts of stuff and the user will never see it. I can set the style as “hidden”, or I can include it inside a tag somewhere, or better yet, and my favorite, I can create a hidden variable: <input type="hidden" id="editinfo1" value="myinfohere"> Now we need to implement this into our PHP to write it to the HTML:
echo "<a href=\"#\" class\"editThis\" id=\"$row[UserId]\">Edit!</a>";
echo "<input type=\"hidden\"";
echo " name=\"editinfo{$row['UserId']}\"";
echo " id=\"editinfo{$row['UserId']}\"";
echo " value=\"$row[Name]::$row[Address]::$row[Age]\">";
So now our HTML will look like this:
<a href="#" class="editThis" id="1">
<input type="hidden" name="editinfo1" id="editinfo1" value="Bob Jones::123 N Street::26">
All our info is now conveniently stored for jQuery to access later!
$(".editThis").click(function{
var id=$(this).attr('id');
var variables=$("#editinfo"+id).val();
var info=variables.split('::');
alert(info[0]+"\n"+info[1]+"\n"+info[2]);
});
Now for the fun part, using jQuery to dynamically change the values of our SINGLE form!
Our form might look like this:
<div id="dialog" title="Edit User">
<form method="post" name="edituserform" action=editUser.php">
<input type="hidden" name="action" value="edituser">
<input type="hidden" name="userid" id="euid" value="0">
<center>
<table width="75%">
<tr>
<td align="right">User Name: </td>
<td align="left"><input type="text" name="username" id="eusername"></td>
</tr>
<tr>
<td align="right">Address: </td>
<td align="left"><input type="text" name="address" id="eaddress"></td>
</tr>
<tr>
<td align="right">Age: </td>
<td align="left"><input type="text" name="age" id="eage"></td>
</tr>
</table>
</center>
</form>
</div>
And our jQuery would look like this:
$(".editThis").click(function{
var id=$(this).attr('id');
var variables=$("#editinfo"+id).val();
var info=variables.split('::');
$("#eusername").val(info[0]);
$("#eaddress").val(info[1]);
$("#eage").val(info[2]);
$("euid").val(id);
$("#dialog").dialog("open");
});
$('#dialog').dialog({
autoOpen: false,
width: 600,
modal: true,
position: 'top',
buttons: {
"Update user": function() {
document.edituserform.submit();
},
"Cancel": function() {
$(this).dialog("close");
}
}
});