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!

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

That’s it! Hopefully it was easy to understand. Let me know if you need anything cleared up a little! Thanks!