jQuery, PHP, and Forms


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

}

}

});



Wyszukiwarka

Podobne podstrony:
CMS Design Using PHP and jQuery
CMS Design Using PHP and jQuery
IBM Using Ajax with PHP and Sajax (2005)
Create Your Own Search Engine with PHP and Google Web Services
Building A Database Driven Website Using PHP And Mysql 2000 Yank
Yank Kevin Building a Database Driven Web Site Using PHP and MySQL
Create dynamic sites with PHP and MySQL
FUTURE TENSES AND FORMS
PHP and MySQL (1)

więcej podobnych podstron