A Javascript Snippet

[syrupcore]

Well, not really 'javascript' but jQuery. You can find out more about jQuery at http://jQuery.com

Anyway, I get tired of typing the same crap over and over so sometimes I use JS to grab stuff from my html page and spit it out into the page in a way that I can use. Tonight I was grabbing POST info via php for a form. I made this little snippet to write out all of my input IDs surrounded by the stuff I needed to just paste it into the php code.

Code: Select all

$("form input, form textarea").each(function(){
	var theID = $(this).attr("id")
	$("#info").append('$' + theID + ' = $_POST["' + theID + '"];<br />');
});

this output this into a the div#info:

Code: Select all

$zip = $_POST["zip"];
$title = $_POST["title"];
$time = $_POST["time"];
$address1 = $_POST["address1"];
$geotag = $_POST["geotag"];
$photograph = $_POST["photograph"];
$equipment = $_POST["equipment"];
$tags = $_POST["tags"];
$fname = $_POST["fname"];
$lname = $_POST["lname"];
$email = $_POST["email"];
$url = $_POST["url"];
$description = $_POST["description"];

modifying the string output a little bit and I got myself everything I needed for MySQL posting.

Code: Select all

$("form input, form textarea").each(function(){
	var theID = $(this).attr("id")
	$("#info").append(theID + ',    ');
});

which output:

Code: Select all

zip,  title,  time,  address1,  geotag,  photograph,  equipment,  tags,  fname,  lname,  email,  url,  description,

prepend that with an INSERT statement and off you go. Same goes for the VALUES line and pretty much anything else you may want to do some basic string manipulation with. Modify at will. It took me longer to write this post than it did to make the jQuery statement and get it into my PHP file!


Will

[syrupcore]

This stuff is made so much easier with jQuery. If you haven't had the chance to play with jQuery yet, do it! Add firebug and man, life is just a little better than before. 21 kilobytes of sweet goodness. One nice thing about jQuery is that it's very simple to read once you know a couple of things.

I thought I'd explain a little more about the jquery portion

Code: Select all

$("form input, form textarea").each(function(){
	var theID = $(this).attr("id")
	$("#info").append(theID + ',    ');
});

A basic idea behind jQuery is 'chaining'. you chain with the dot and parens. $(getsomething).dosomething().doanotherthing().doanotherthing()

Another great thing is the way jQuery grabs elements from the page. jQuery uses css syntax in place of JavaScript's 'getElementsById' or getElementsByTagName' and then extends them quite a bit. You can grab stuff by class name or attribute or grab all <li>s after the 3rd one in a 2nd list on a page or.....

so, line by line....

Code: Select all

// This line grabs all of the form's inputs and textareas and for each one it finds, it runs a function
$("form input, form textarea").each(function(){

// grabs the value of each item's id attribute and puts it into a variable
	var theID = $(this).attr("id")

// each variable is appended to the html of the #info div.  
	$("#info").append(theID + ',    ');
});

// note: 'append' means inserted after the existing content, before the close of the container.  
// there are lots and lots of these in jQuery (prepend, insertBefore, innerWrap...)

hope it helps,
will