Award-winning web development since 1995
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:
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 |
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: autocomplete, jQuery, json, MySQL, PHP
©2018 Tualatin Web LLC. All rights reserved. |
Payment |
Web Hosting |
Could you please upload your code? I really need this code in my project .
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.
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 .
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.?
No, it’s just a school project. Thank you for the offer but I just have to figure it out myself.