MC Search and Match — JavaScript

MC (Microcommunity) Search and Match — JavaScript

So what is an MC and why would anyone want to search it, register for it, or even hear about it? See for yourself: MCs (Microcommunities). They are the key to social enhancement and community enrichment on a scale undreamed of on the social networking sites and chat rooms that are—in comparison—a pale imitation of real connectedness and successful community functioning.

The search and match script has been specifically designed for MCs (Microcommunities), but it will work for any group matching purposes.

The scripts below are JavaScript-related parts of match.php

The first section is in the JavaScript section of the head tag of the script. First, we have the c() function which is designed to limit the number of checkboxes checked, in inputs with the name Willing_to_relocate, to one. Or the distance scripts will not work. The PHP functions milesapart() and coords() are distance scripts that need to compare the zip code of the user with the zip codes of the rest of the users in the database to determine which are within a certain distance (these distances are in the $dist[] array) which has been selected by the user by him checking ONE of the checkboxes in the Willing_to_relocate section of the search form. The zipcode database was free. Thanks, guys. It contains latitudes and longitudes and zips (and other stuff) which is enough info to enable us to calculate distances between zipcodes as long as they are in the USA and not military. We stuck all 42000+ records into a MySQL database table that is nearly 3MB in size. Yes, there are better zipcode databases that are more up to date and have the military zipcodes as well, but they cost a bit and we didn't feel like paying.

The c() function is run by onchange events in all the input boxes named Willing_to_relocate. (The reason these boxes all have the same name is they are from a select/option form which we converted to checkboxes for the purpose of selecting search criteria—their name attributes are supposed to be the same.) The c() function dumps any checkbox checking past the first one (in this one section only—otherwise the user is allowed to check 10 search criteria when he searches). First it gets all the input box properties of boxes named Willing_to_relocate into an array g[]. Then it loops through and registers an anonymous function to the onclick property of the array elements which is therefore executed whenever the user clicks on the element—the input box's checkbox. Then it loops through counting how many of the input boxes have the clicked property (checkbox has been clicked) and if more than one are checked, an alert warns the user and the clicked property is neutralized with this.checked=false. The "this" keyword refers to the HTML element the event is handled by: the input box.

Next comes the function validatepassword(), the input validator run from the onsubmit event of the main HTML form. First we use the getElementsByTagName() method to loop through all the input tags, using if(e[i].checked==true && e[i].type=="checkbox"){a[x]=e[i].name;b[x]=e[i].value;x++; to find the checked input elements of type "checkbox", whereupon we stick their name attributes into the a[] array and their value attributes into the b[] array. Note x++ only happens if checked checkboxes are discovered. We allow only 10 search criteria, so if they checked too many, we warn them with an alert box after using the slice() method to knock the arrays of checked input box attributes back to only 10. Then the arrays are stringified into strings and stuck into the form's hidden fields named fieldvalue and fieldname. These will end up exploded into PHP arrays upon form submission.

Then city, state, zip, and groupname search criteria input (if there is any) is filtered with regular expression patterns like /^[A-Za-z0-9_]{6,20}$/ which both limits the length of the input and the characters accepted.

If the user clicks on Save Your Results in the nav bar, he sees this alert: "To save a record of your search results, go to your browser's File menu and select Save As, then choose Webpage, HTML only, except in Chrome, where you need to choose Webpage, Complete. On Mac Safari, save as Web Archive."

Next is our browser sniffer, since Firefox and IE have never quite seen eye to eye, and Mac Safari needs special tweaking as well, and IE Mac is a basket case and we state as much in an alert. Then comes the function fixwidth(), which tweaks the CSS according to browser quirks.

The reason we are willing to use JavaScript to send visitors away or use confirm boxes to get user's decisions, or police how many checkboxes are checked, or validate and filter all user input before it gets to the PHP input filtering script, is that none of our scripts will work without it. One cannot register, enter data, get from here to there, etc., in most of our scripts without it. What serious web surfer turns off JavaScript? In case you were not aware, many sites rely totally on JavaScript for menu functioning and some of their scripts. And what about data entry? In case you didn't know it, it is a huge convenience for the user because of the way it does input validation. A good site will validate in JavaScript as well as PHP. When the JavaScript data validation script catches unacceptable input, it can simply send focus to the input box where the bad input happened, the user fixes it, and the script is submitted. But if JavaScript is disabled, the user gets sent to PHP data validation which catches the bad data and sends the user back to the input form to redo all input from scratch. The JavaScript data validation script will not make a user restart, if well written. If you have experienced restarting data entry in a long form due to an accidental character, you know exactly what we are talking about. It's maddening! And a good way to get users to surf away from your site forever. If a person turns off THE major browser scripting language just because of a miniscule chance of encountering a scripting exploit on some web page, rather than installing good anti-spyware and anti-virus software, his Internet experience overall will be greatly diminished. Many sites have no alternatives to their script-enabled navigation, so the person is 100% screwed on those sites. But even on those with the alternative, it is always cumbersome and awkward. Point taken?

The following two script exerpts are PHP and JavaScript both. The first is a sample input filtering script ensures the data entered is long enough. If not, the user stays put but there is a page reload and a query string makes sure the search type (Search All or just Search Your Results) flag keeps its value: match.php?searchtype='.$R.'. Next, the JavaScript Confirm function allows users to select the search type once they get zero results from a search. Reloading match.php with no URL query string is the same as choosing Search All.

if (strlen($G)<6&&strlen($G)>0) {restorem();echo '<script language="javascript">alert("Please enter 6 to 20 characters for group name."); window.location = "match.php?searchtype='.$R.'"; </script>';

if ($gotmatch<1 && $relocate==0){restorem();echo '<script language="javascript">var answer = confirm ("No results were found. If you want to Search Your Results, click OK. If you want to Search All, click Cancel.");if (answer){window.location = "match.php?searchtype='.$R.'";}else{window.location = "match.php";} </script>';

Free Personal Status Boards (PSB™)

MC (Microcommunity) Search and Match — JavaScript