Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Standard view
Full view
of .
Look up keyword
Like this
0 of .
Results for:
No results containing your search query
P. 1
Jquery form

Jquery form

Ratings: (0)|Views: 4|Likes:
Published by Asim Shariff
Jquery form
Jquery form

More info:

Categories:Types, Research
Published by: Asim Shariff on Jan 18, 2011
Copyright:Attribution Non-commercial


Read on Scribd mobile: iPhone, iPad and Android.
download as TXT, PDF, TXT or read online from Scribd
See more
See less





jQuery, PHP, and FormsI 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 togive 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, whichis what I am going to describe.This is the goal!I click the linkA dialog box pops upThe text boxes have info filled in alreadySomething like this:Name:I can edit it, then submit itI want the code to be smallThe 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 Ifinally figured it out. All I had to do was create a value and store it in thebutton 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 adifferent 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. Thisis 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 wantthe 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 wecould pass that info into HTML as a â
variable. HTML is great because you can he all sorts of stuff and the user will never see it. I can set the style as â
,I can include it inside a tag somewhere, or better yet, and my favorite, I cancreate 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!

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->