<html>
<head>
<script type="text/JavaScript">
<!--
function check_form_data()
{
if (document.the_form.email.value == "")
{
alert("Email is a required field. Please fill it in.");
document.the_form.email.focus();
document.the_form.email.style.background = "#EEF111";
return;
}else{
document.the_form.submit();
}
}
// -->
</script>
</head>
<body>
<?php
if (isset($_POST['test_val'])){
process_form();
}else{
print_form();
}
function print_form(){
print <<< FORM_TEXT
<!--Note that the action just points back to the same page-->
<form name="the_form" method="POST" action="this_page.php">
<!--Here is our test value-->
<input type="hidden" value="1" name="test_val">
Email: <input type="text" id="email" size="20"><br>
<input type="button" onClick="check_form_data();" value="Submit">
</form>
FORM_TEXT;
}
function process_form(){
//Process the form data - send an email, write to a DB, whatever.
}
?>
</body>
</html>
Friday, October 31, 2008
Validating Form Entries with JavaScript PS
OK. Being new to Blogger, I didn't realize how to correctly post code samples to an entry. Hence the screen captures in my last post. Below is a copy-and-paste-friendly version of the whole page of code I used for that example.
Thursday, October 30, 2008
Validating Form Entries with JavaScript
I use HTML forms quite a lot on the web sites I build for a variety of purposes. Most of the ones I build these days are self-handling PHP forms. This means that the form and the PHP that handles the form are on the same page. This is easy to do. You just put a hidden value in the form that gets set when the visitor submits the form. The PHP code checks for that value. If it's set, it does the processing. If it's not set, it displays the form. The basic code layout looks something like this:
In the first part of the PHP, we check to see if the hidden value "test_val" is set. If it is, process_form(), otherwise print_form(). Nothing to it.
We can have process_form() do just about anything with the submitted data. What we don't want it doing is trying to process form data that cannot, or should not, be processed. We may have certain fields that are required. We may have fields where the input has to be in a certain format or match certain criteria. Of course, we also don't want to be processing anything that is clearly the work of a spambot. We could handle all of this on the server side and in some cases where more complex validation is needed, this might be appropriate. But why have our server waste processing cycles doing simple checks for missing or garbage data? Let the requesting browser do it by giving the data a quick once-over with client-side JavaScript first.
The first thing that we have to do is intercept the form data before it gets sent to the server. To do this, we will replace the usual HTML form SUBMIT button with a generic button that launches our JavaScript when clicked, like this:
For illustration, let's plug this into a simple form that collects an email address:
Now let's assume that we want to do a simple validation to make sure that the email field is not blank when submitted. The basic layout of our JavaScript function (placed in the HEAD) could look something like this:
We check to see if the email value is blank. If it is, we throw an alert and exit the function. Otherwise, we call the JavaScript submit function, which sends the validated form data on its merry way.
We check to see if the email value is blank. If it is, we throw an alert and exit the function. Otherwise, we call the JavaScript submit function, which sends the validated form data on its merry way.
Of course, the validation we have done here is very simple. We could check to see that the value of the email field matches the proper format for an email address. We could write a loop to systematically check multiple required fields. We could check to see that multiple fields do not contain the same value - an annoying spambot symptom. We could even dynamically add additional fields to the form based on the visitor's initial inputs. There is loads more we could do.
In our simple example, we could help the visitor even more by sending their cursor directly to the email field:
We could even highlight the field in yellow to further alert the visitor to the problematic field:
This is especially useful if you are checking and flagging multiple fields. You can focus the visitor's cursor on the first problem field, but highlight them all so that they see all the problems. Just remember to reset the highlight color back to the default for all fields at the start of your function, otherwise the fields that your visitor did fix will still be highlighted.
Certainly nothing groundbreaking here, but useful stuff. There are tons of examples of this out there and the complexity of your validation is really only limited by your knowledge of JavaScript.
Monday, October 27, 2008
Why I Like Building Models
So, after several months of a little time one evening here and a little time one afternoon there, a few dozen bits of plastic are now one little six-inch long model airplane collecting dust on my shelf.
What was the point, exactly? What is it that compels me to spend so much of my spare time cutting, sanding, painting and gluing to produce something that in the final analysis is, well, completely useless. Then I go to the hobby shop and buy more box loads of plastic bits so that I can spend many more hours hard at work on...more dust bunny bait. Then I go online and spend hours finding reference photos so that I can see just what the right flap extension angle is for a Boeing 747 on final. Or I am online tracking down that extensive photo-etch detail set for the USS Missouri kit that already has hundreds of parts.
In contrast, my wife throws pots. At least when she is done we have something that, in addition to being nice to look at, is also useful like a mug or a bowl or a plate. She also sews. She has made me shirts, made clothing for our sons, etc. Again, the end result is useful. Not my models. They just sit on the shelf.
But maybe that's exactly why I like doing it. It is, in the truest sense, a hobby. A total waste of time done purely for enjoyment.
Well, off to work on my WWII half track...
What was the point, exactly? What is it that compels me to spend so much of my spare time cutting, sanding, painting and gluing to produce something that in the final analysis is, well, completely useless. Then I go to the hobby shop and buy more box loads of plastic bits so that I can spend many more hours hard at work on...more dust bunny bait. Then I go online and spend hours finding reference photos so that I can see just what the right flap extension angle is for a Boeing 747 on final. Or I am online tracking down that extensive photo-etch detail set for the USS Missouri kit that already has hundreds of parts.
In contrast, my wife throws pots. At least when she is done we have something that, in addition to being nice to look at, is also useful like a mug or a bowl or a plate. She also sews. She has made me shirts, made clothing for our sons, etc. Again, the end result is useful. Not my models. They just sit on the shelf.
But maybe that's exactly why I like doing it. It is, in the truest sense, a hobby. A total waste of time done purely for enjoyment.
Well, off to work on my WWII half track...
Friday, October 24, 2008
Fun With Google Maps API
I was a Geography major in college and I have always loved maps. I like looking at them and I like working with them. It is something I often have to do when I build web sites for small businesses, particularly those with physical locations that customers need to get to.
In the past, I always just put together a static map graphic and added a hyperlink to MapQuest or some other site for directions. Then I read about Google allowing people to tap into their maps API to display fully functional Google maps on their own pages. (I read about it in Quest Software's Knowledge Xpert for MySQL, of all things, the latest version of which includes a very nice tutorial on this subject.) Anyway, it's really pretty easy. Just a matter of signing up with Google to get a key and then adding some JavaScript to your page - not that dissimilar to Google Analytics, another wonderful and inexplicably free Google web toy.
To start, you need to register and get a key from Google. You need one key for each domain you want to put your map on. You can get a key here:
http://code.google.com/apis/maps/signup.html
Google will provide you with the code you need to drop into your page and they have loads of docs on the various options available to you. Alternatively, you can get some nice code from the aforementioned Knowledge Xpert product, which is free.
But it's straightforward enough. Some JavaScript in your HEAD, then a DIV tag where you want to actually place the map. You can include or exclude all the various controls like pan, zoom, Map/Satellite/Hybrid toggles, etc. It can be easily sized.
One thing that's not as obvious. Some of the Knowledge Xpert examples center the map using a Google geocode (the lat and long) for where you want the map to center on initially. Their instructions for obtaining that geocode for a specific address were a little fuzzy for me. As it happens, there is a URL that you can ping to get the code for any address. The example below finds the geocode for 810 Guadalupe Street, Austin (if you put in your google maps key at the end):
http://maps.google.com/maps/geo?q=810+Guadalupe+Street,+Austin,+TX&output=csv&key=your_google_key_here
To see the example where I used Google Maps, visit http://www.austinsms.org/meetings.php and have a peek at the source.
Knowledge Xpert also provides additional information on tying this into a MySQL database to store and map multiple locations, if you are so inclined.
Lots of fun to play with and a much nicer solution to providing a map on your web site.
In the past, I always just put together a static map graphic and added a hyperlink to MapQuest or some other site for directions. Then I read about Google allowing people to tap into their maps API to display fully functional Google maps on their own pages. (I read about it in Quest Software's Knowledge Xpert for MySQL, of all things, the latest version of which includes a very nice tutorial on this subject.) Anyway, it's really pretty easy. Just a matter of signing up with Google to get a key and then adding some JavaScript to your page - not that dissimilar to Google Analytics, another wonderful and inexplicably free Google web toy.
To start, you need to register and get a key from Google. You need one key for each domain you want to put your map on. You can get a key here:
http://code.google.com/apis/maps/signup.html
Google will provide you with the code you need to drop into your page and they have loads of docs on the various options available to you. Alternatively, you can get some nice code from the aforementioned Knowledge Xpert product, which is free.
But it's straightforward enough. Some JavaScript in your HEAD, then a DIV tag where you want to actually place the map. You can include or exclude all the various controls like pan, zoom, Map/Satellite/Hybrid toggles, etc. It can be easily sized.
One thing that's not as obvious. Some of the Knowledge Xpert examples center the map using a Google geocode (the lat and long) for where you want the map to center on initially. Their instructions for obtaining that geocode for a specific address were a little fuzzy for me. As it happens, there is a URL that you can ping to get the code for any address. The example below finds the geocode for 810 Guadalupe Street, Austin (if you put in your google maps key at the end):
http://maps.google.com/maps/geo?q=810+Guadalupe+Street,+Austin,+TX&output=csv&key=your_google_key_here
To see the example where I used Google Maps, visit http://www.austinsms.org/meetings.php and have a peek at the source.
Knowledge Xpert also provides additional information on tying this into a MySQL database to store and map multiple locations, if you are so inclined.
Lots of fun to play with and a much nicer solution to providing a map on your web site.
Subscribe to:
Posts (Atom)
