Speeding Event Registration with Auto Fill

Written: July 7, 2011

PPI is a client that organizes several annual events with online registration. Jules at PPI asked me to look into automating the process for companies that are returning again this year so they don’t have to re-type so much information again.

I did some searching on Google and found a solution that uses jQuery, then another site that showed how to integrate that with a MySQL database.

Here’s what the visitor sees when they register:

speeding event regisration

As they type in their company name like “canon” they see a list of possible matches:

They click the matched name “Canon” and the next 8 fields are auto-filled:

Coding

Adding this new feature required that I add jQuery and CSS in the HEAD of my page and define which fields should be auto-filled:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {

   
    $("#company").autocomplete({
        source: "test_company.php",
        minLength: 2,
        select: function(event, ui) {
            $('#address').val(ui.item.address);
            $('#city').val(ui.item.city);
            $('#state').val(ui.item.state);
            $('#zip').val(ui.item.zip);
            $('#phone').val(ui.item.phone);
            $('#email').val(ui.item.email);
            $('#first_name').val(ui.item.first_name);
            $('#last_name').val(ui.item.last_name);
           
        }
    });
   
});


</script>

On line 9 I used #company as the name of the input field where a visitor types the company name.

The connection to the database with all of the company info stored is defined on line 10 as “test_company.php”.

Lines 13 thru 20 have the eight field names that I want to auto fill in my form.

The HTML for each field uses the same ID just defined in the Javascript listed above:

1
2
3
<input name="company" type="text" id="company" />
<input name="first_name" type="text" id="first_name" />
...

The connection to the MySQL database is defined in the file “test_company.php”:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?
/* Connection to the database. */
include 'database.php';

$return_arr = array();

/* If connection to database, run sql statement. */
$fetch = mysql_query("SELECT * FROM ppigolf WHERE company LIKE '%" . mysql_real_escape_string($_GET['term']) . "%'");

/* Retrieve and store in array the results of the query.*/
while ($row = mysql_fetch_array($fetch) ) {
    $row_array['address'] = $row['address'];
    $row_array['city'] = $row['city'];
    $row_array['state'] = $row['state'];
    $row_array['zip'] = $row['zip'];
    $row_array['phone'] = $row['phone'];
    $row_array['email'] = $row['email'];
    $row_array['first_name'] = $row['first_name'];
    $row_array['last_name'] = $row['last_name'];
    $row_array['value'] = $row['company'];

    array_push($return_arr,$row_array);
}

/* Free connection resources. */
mysql_close();

/* Toss back results as json encoded array. */
echo json_encode($return_arr);
?>

Line 20 is where I define that “company” is the ID being typed by the web visitor and is requires the array key of “value”. For simplicity I named my form fields the same as my database table fields.

Enjoy automating your registration forms and using auto-fill to speed up the process.

Tags: , , , ,

Leave a Reply