Javascript Code for HTML Form Creator—Search and Match: Search for Compatible Groups

The scripts below are Javascript-related parts of match_.php

The Javascript Code for HTML Form Creator—Search and Match: Search for Compatible Groups CMS script is one of a group of PHP scripts that handle both the administrative and end-user aspects of a general purpose HTML Form Creator that allows not just input boxes but multiple selection enabled select/option lists as well. In addition to the expectable editing scripts for both administrative and end-user functions, there's also a Search and Match script—the one on this page is just for the search and match form—so that users can use the scripts to find other users with various individual or group commonalities, including proximity searches, i.e., find all the users within various distances. There are even private messaging scripts in this Content Management System (CMS). And the script on this page, match_.php, includes a word search as well as a proximity search based on zip codes and a criteria matching search.

Administrative HTML Form Creator Scripts

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.

Then comes the again() function. This is run from a link that shows up at the end of the word search process after the search results have been displayed on the screen. The window.location="match_.php?searchtype=word" code simply refreshes the page with the word search choice variable in a URL query string.

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."

The function checkdb() gets the user's MySQL database table prefix input, since one cannot search on an administrator-created HTML form unless one specifies which one is wanted—who knows how many forms the administrator created? The input is filtered with regular expression patterns like /^[A-Za-z0-9_]{3,20}$/ which both limits the length of the input and the characters accepted.

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. It is run by an onload event in the body tag.

There is a Javascript window confirm function in the PHP code block: 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>' This is a cool way to handle a "no results" result. It sends the user to the same page with or without a URL query string, depending on the user's selection. The $R variable holds the current search mode. With no query string, the page defaults to a Search All mode.

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?

Free Personal Status Boards (PSB™)

Javascript Code for HTML Form Creator—Search and Match: Search for Compatible Groups

Administrative HTML Form Creator Scripts

End-User HTML Form Creator Scripts