Using JavaScript and PHP server to set textbox value after a dropdown value is selected

Question

I am using a form which will retrieve values to set the textbox inputs after a dropdown value is selected. My problem comes from the fact that my PHP server function is designed to take the selected index of dropdown as parameter and return related values to populate the textboxes. However I can't figure out how to combine the PHP function and the JavaScript which will do the textbox value setting. Below is my sample code.

As can be seen below, displayGamsProjectInfo(fe) function calls the database function ddGamsProjectInfo($gamsId) but how can I can I allow the PHP function to 'pick' the selected dropdown index without the user POSTing the form values (after maybe button clicked)

JavaScript/PHP:

    <script language='javascript'>function displayGamsProjectInfo(fe){
   document.all.FACILITY_RC_ID.value= '';
   document.all.FACILITY_FACULTY_ID.value= '';
   document.all.FACILITY_SUPVSOR_NAME.value= '';
   document.all.FACILITY_SUPVSOR_TELNUM.value= '';
   document.all.FACILITY_SUPVSOR_EMAIL.value= '';
   if(fe.value != null && fe.value != ''){\n";
   $getGamsInfo = FacilityDB::getInstance()->***ddGamsProjectInfo()***;
   if($getGamsInfo && $getGamsInfo != null){ 
      if($row = oci_fetch_array($getGamsInfo)){ 
        print "document.all.FACILITY_RC_ID.value= '$row[RES_CENTER]';
        document.all.FACILITY_FACULTY_ID.value= '$row[FACULTY_ID]';
        document.all.FACILITY_SUPVSOR_NAME.value= '$row[STAFF_NAME]';
        document.all.FACILITY_SUPVSOR_TELNUM.value= '$row[STAFF_TELNUM]';
        document.all.FACILITY_SUPVSOR_EMAIL.value= '$row[STAFF_EMAIL]';\n";                      
        }
      }                                             
   print "}\n
}</script>"

PHP function:

public function ddGamsProjectInfo($gamsId){
    if(!isset($gamsId) || $gamsId == '' || $gamsId == null)
       return null;
    else{
       $sql = "....";       
       $stmt = oci_parse($this->con, $sql);
       oci_execute($stmt);
       return $stmt;
    }

}

Answer 1

Trying to elaborate more on my comment above...

Basically, this is what you are trying to do: (Correct me if I'm wrong)

1. User selects value from a drop-down.
2. Based on that dropdown value, textboxes are populated with certain values.
   • However you don't want to have an explicit HTTP POST to accomplish this.

This is possible with PHP and JS, but in more general terms it's possible with Ajax.

You need to:

• Write a JS event handler tied to the drop down that does an Ajax POST to a PHP handler, passing in the dropdown value.
• Write the PHP handler to deal with the dropdown value and return the proper textbox values, preferably in a JS-friendly format like JSON.
• Write the JS Ajax callback to deal with the return values. This is where you'll populate the textbox values.

Current JavaScript libraries (jQuery, etc) provide a lot of this functionality. For example, here's jQuery's documentation on its Ajax functions.