Speeding Event Registration with Auto Fill

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

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.

This Post Has 5 Comments

Chiusuzaki Hime November 10, 2014 Reply

Could you please upload your code? I really need this code in my project .
1. Daniel Payne November 10, 2014 Reply
  
  The code is already posted in the blog. Are you a developer or just a web user? This code is meant for someone that knows how to program with: jQuery, CSS, HTML, PHP and MySQL.
  1. Chiusuzaki Hime November 10, 2014 Reply
    
    I’m a developer, a beginner . I try to run your code after adjusting several places (where necessary) but I couldn’t get the same result as posted here .
Daniel Payne November 10, 2014 Reply

I’m available for hire at $75.00/hour to make this work on your web site. Are you using any CMS like WordPress, Drupal, Joomla, etc.?
1. Chiusuzaki Hime November 10, 2014 Reply
  
  No, it’s just a school project. Thank you for the offer but I just have to figure it out myself.