I just updated http://www.whathuhstudios.com/press/2008/01/04/ajax-contact-form-quick-install/ to version 1.6, updated JQuery to 1.4, fixed some validation bugs, etc. It’s still simple and small. Go grab it. You’ll be glad. Maybe.

Tags: , , , , , , ,

Some Jquery tricks

development April 22nd, 2009

I have been using Jquery for a few months now, and have completely fallen in love with it. I’ve probably looked at hundreds of different pages, blogs, posts, plugins, and tricks over the time I’ve spent learning it. Here are a few of my favorite things to use it for.

Putting text labels in a password field

Password inputs mask the text in them, so having “Enter Password” inside the field won’t do much good. We can’t change the type of input on the fly, but we can make it disappear, and have another appear… Here’s how I’ve done this:

1.	$(".passflip").click(function() {
2.	  if ($(this).attr("type") == "text") {
3.	    $(this).hide();
4.	    $("#"+$(this).attr("id").slice(1)).show().focus();
5.	  }
6.	});
7.	$(".passflip").show();
8.	$(":password").hide();

And the HTML code:

1.   <input id="Tuser_pass" class="input passflip" style="display: none;"
        name="Tpwd" size="20" type="text" value="Enter Password" />
2.   <input id="user_pass" class="input" name="pwd" size="20"
        type="password" />

What we’re looking at here may seem messy at first, especially line 4 of the javascript code. Its not that bad. It takes the id of the passflip element that we clicked, removes the first character (giving us user_pass in this case), and shows and sets focus to that element. To the user, that text input will have “transformed” to a password input seamlessly.

The text input has an initial display of “none”. Also, in lines 7 and 8, we then hide all the password inputs (which are set to visible on page load), and show all the passflip inputs. This ensures that for those without javascript enabled, they will still be able to use the form as intented. The only difference, is that they won’t see the “Enter Password” information in the input, it will just be blank.

Friendly one time “clear this” function

1.	$(".clearThis").click(function() {
2.	   if ($(this).val() == $(this).attr("title")) $(this).val("");
3.	});
4.	$("#username").val($("#username").attr("title"));

and the html

1.   <input type="text" name="user_email" id="user_email"
       class="input clearThis"  size="20" tabindex="20"
       title="ENTER EMAIL" />

The value of this little gem may not be apparent at first, but it’s a perfect companion to the above mentioned function, and fails very gracefully on non-javascript enabled machines as well.

Instead of setting the value of the text box to display “ENTER EMAIL”, we simply set the title. What happens then, if javascript is enabled, is that the value will be set, displaying instructions to the user. the clearThis click function then checks to see if the two match, and if so, its likely the first time that input was clicked, and it clears the box for user input. If javascript is not enabled, the clearThis click function obviously cannot work, but the text input won’t have anything in it to clear anyway, so we have a double win.

This is all I have for now. I’ll post more sometime next week. Love live JQuery!

Tags: , , , ,

I just updated http://www.whathuhstudios.com/press/2008/01/04/ajax-contact-form-quick-install/ to version 1.5, reworked with JQuery, and trimmed the size down to about 33% of what it used to be. Check it out for a quick and easy way to add some Ajax Class© to your website!

Tags: , , , , , , ,

When posting data from a form to a page, the $_POST variable gets set to an array similar to this:

Array ([name] => "daniel", [state] => "illinois", [phone] => "630-618-9588")

Now, one way to process this is to know in advance (which, normally you will), what the values will be, and set them to more usable variables. For example:

$newclient["name"] = $_POST["name"];
$newclient["state"] = $_POST["state"];
$newclient["phone"] = $_POST["phone"];

Now, for a simple form that only has one or two values, that’s fine. The code is clean, easy to read, and it gets the job done. Now, if you have a more complex form, the array may look more like this:

Array ( [lastname] => costalis [firstname] => daniel [MI] => g [lastnameguardian] =>
kolar [firstnameguardian] => maureen [MIguardian] => p [Month] => 10 [Day] => 05 [Year]
=> 1983 [Age] => [address1] => 445 n ardmore ave #k [address2] => [city] => villa park
[state] => IL [zip] => 60181 [phone1] => 6306189588 [phone2] => [phone3] => 6306189588
[email] => costalis.dan@gmail.com [feet] => 5 [inches] => 10 [pounds] => 165 [hair] =>
Brown [eyes] => Green [union] => Yes [experience] => None [skills] => Jumping [notes]
=> Great Guy [submit] => Add Client )

You can copy and paste 31 times, and edit all the values if you want… or, write something that will do it for you. (read: copy and paste my code and edit it to your needs) This particular set of code is designed to update a mysql database, but can be modified to your liking. the “safedata” function is to prevent hacking of your database.

function safedata( $string ) {
    return "'" . mysql_real_escape_string( $string ) . "'"; //add needed slashes,
enclose data in quotes.
}
foreach ($_POST as $field => $value) //Count through each post item
{
$fields[] = $field; //add current field name to fields array
 $values[] = $value;//add current field value to value array. Will have same index
as its field name
}

$query  = "INSERT INTO `SomeTable` ("; //Start of MySql query

foreach ($fields as $fieldname) //for each field name
    $query .= "`" . $fieldname . "`,"; //add field to list in query. safedata not
needed... you supplied the names

$query = rtrim($query,","); //trim off extra comma after final value
$query .= ") VALUES("; //close off field names, begin listing values

foreach ($values as $valuename) //for each value corresponding to its field
    $query .= safedata($valuename) . ","; //add value to list
$query = rtrim($query,","); //again, we have an extra comma
$query .= ") ;"; //end query string

$result = mysql_query($query); //excecute query
 // created by : http://www.whathuhstudios.com/press : attribution may be removed and
is not required

You could easily use this to assign the values to an array of your liking, or whatever you like. Either way, this is a nice easy way to deal with large form submissions without the use of a PHP framework. Do what you want with this code, and if you happen to include a link to my site on your site, or leave me a comment… then so be it. Hope this helps someone.

Tags: , , , ,