Question

We are building an advanced form with following fields…

<input type="text" size="50" name="name" >
<input type="text" size="50" name="custid" >
<input type="text" size="50" name="projectname" >
<input type="text" size="50" name="overdue" >

We are using jquery autocomplete to select name from MySQL and what we would like to do is:

We want to add custid, projectname, and overdue to their fields after adding name automatically, we can do it in PHP but how can we do it using jQuery or ajax? Can you help us to write up the code? We can add 1 output using ajax but how do we add multiple outputs? thanks.

Answer 1

You could retrieve the remaining fields using AJAX, by having a PHP script which outputs their details in JSON format. So if your data is stored in an associative array called $data, you can simply do echo json_encode( $data );. Each field name in the array, will be the name of the instance variable you’ll need to call in the jQuery. The code below assumes your array field names are the same as your inputs.

You then use jQuery.get( ) (or similarly jQuery.ajax( )) to obtain the result. jQuery below:

$.get('myscript.php', 
      {name: name},
      function(data) {
        // If successful, fill out the fields
        $('#custid').val(data.custid);
        $('#projectname').val(data.projectname);
        $('#overdue').val(data.overdue);
      },
      // tells jQuery it's retrieving a JSON encoded object
      'json'
);

This will also require you to slightly alter your HTML as below:

<input type="text" size="50" name="custid" id="custid" >
<input type="text" size="50" name="projectname" id="projectname" >
<input type="text" size="50" name="overdue" id="overdue" >