Not A n00b » dialog http://notan00b.com Tutorials, Scripts, and Rants Wed, 12 May 2010 08:08:35 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 jQuery, PHP, and Forms http://notan00b.com/2009/09/jquery-php-and-forms/ http://notan00b.com/2009/09/jquery-php-and-forms/#comments Sat, 05 Sep 2009 01:56:57 +0000 pyr0t3chnician http://notan00b.com/?p=204 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"); 
            } 
        }
    });

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

    ]]>     http://notan00b.com/2009/09/jquery-php-and-forms/feed/ 4