Untitled

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:

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:

<tr>

</tr>

<tr>

<td align="right">Address: </td>

</tr>

<tr>

</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");

}

});