I understand how to get this done with pure PHP but I have to do that without reloading the page. Can there be anyway with jQuery to effectively withdraw some database results (according to exactly what a user has input within the first text area on the form) then populate a few of the remaining fields with data drawn back from the db query?

Basically I must begin to see the user escape from the written text area (either by tabbing out or by click within the next area) and boom, the totally posted while using value joined for the reason that area and also the subsequent fields are then populated w/o a webpage reload.

I'm acquainted with the fundamentals of jQuery however i haven't tried on the extender to complete anything such as this by which I'm tugging data back in the server and seeking to populate it client side.

Any suggestions / good examples regarding how to best get began with this is greatly appreciated. Thanks.

  • Nicholas

Presuming this situation HTML:

<input type="text" name="email" id="email" />
<input type="text" name="first_name" id="first_name" />
<input type="text" name="last_name" id="last_name" />

You might 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've got a PHP script (within this situation research.php) that can take an e-mail within the query string and returns a JSON formatted array back using the values you need to access. This is actually the part that really hits the database to find information about the values:

<?php
//look up the record based on email and get the firstname and lastname
...

//build the JSON array for return
$json = array(array('field' => 'first_name', 
                    'value' => $firstName), 
              array('field' => 'last_name', 
                    'value' => $last_name));
echo json_encode($json );
?>

You will want to do other activities like sanitize the e-mail input, etc, but should enable you to get pointed in the right direction.

If you want to hit the database, you have to hit the net server again (typically).

You skill is use AJAX, making a request to a different script in your site to retrieve data, will get the information, after which updates the input fields you would like.

AJAX calls can be created in jquery using the $.ajax() function call, which means this may happen

User's browser makes its way into input that fires a trigger which 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 have to point that AJAX call at script (seems like you are working PHP) that is going to do the query you would like and send back data.

You'll most likely desire to use the JSON object call so that you can pass back a javascript object, that'll be simpler to make use of than return XML etc.

The php function json_scribe($phpobj) is going to be helpful.