Dynamically fill in form values with jQuery

Question

I know how to do this with pure PHP but I need to do this without reloading the page   Is there anyway with jQuery to effectively pull back some database results  based on what a user has input in the first text field on a form  then populate some of the remaining fields with data pulled back from a db query   Essentially I would like to see the user move away from the text field  either by tabbing out or by click in the next field  and boom  the query is submitted using the value entered in that field and the subsequent fields are then populated w o a page reload   I am familiar with the basics of jQuery but I haven t used it to do anything like this in which I am pulling data back from the server and trying to populate it client side   Any suggestions   examples on how to best get started with this would be very much appreciated   Thanks    Nicholas

User · Answer

If you need to hit the database  you need to hit the web server again  for the most part    What you can do is use AJAX  which makes a request to another script on your site to retrieve data  gets the data  and then updates the input fields you want   AJAX calls can be made in jquery with the   ajax   function call  so this will happen  User s browser enters input that fires a trigger that makes an AJAX call     input  callAjax   bind  change   function          ajax   url   script ajax               type  json            data   foo               success  function data                    input  targetAjax   val data newValue                         Now you will need to point that AJAX call at script  sounds like you re working PHP  that will do the query you want and send back data   You will probably want to use the JSON object call so you can pass back a javascript object  that will be easier to use than return XML etc   The php function json encode  phpobj   will be useful

User · Answer

Assuming this example HTML    lt input type  text  name  email  id  email    gt   lt input type  text  name  first name  id  first name    gt   lt input type  text  name  last name  id  last name    gt    You could have this javascript       email   bind  change   function e       getJSON  http   yourwebsite com lokup php email         email   val            function data               each data  function i item               if  item field     first name                       first name   val item value                 else if  item field     last name                       last name   val item value                                                 Then just you have a PHP script  in this case lookup php  that takes an email in the query string and returns a JSON formatted array back with the values you want to access   This is the part that actually hits the database to look up the values    lt  php   look up the record based on email and get the firstname and lastname        build the JSON array for return  json   array array  field    gt   first name                         value    gt   firstName                  array  field    gt   last name                         value    gt   last name    echo json encode  json      gt    You ll want to do other things like sanitize the email input  etc  but should get you going in the right direction

User · Answer

Automatically fill all form fields from an array   http   jsfiddle net brynner wf0rk7tz 2   JS  function fill a       for var k in a               name    k       val a k             array example     God   Jesus   Holy   Spirit     fill array example     HTML   lt form gt   lt input name  God  gt   lt input name  Holy  gt   lt  form gt

[javascript] Dynamically fill in form values with jQuery

Examples related to javascript

Examples related to jquery

Examples related to database

Examples related to ajax

Examples related to dynamic