Getting Started with AJAX - Updating Form via PHP

Question

I have a simple HTML form which starts with a select menu where the user can select from a list of Projects. I've created a simple JSFiddle with the HTML form here:

http://jsfiddle.net/AZ4PM/

What I would like to happen is that when the user selects from the list it triggers a php script to be performed which takes the value from the ProjectNumber they have selected and passes this as a parameter, e.g. if I select Project A the URL would be:

getProjectPhases.php?projectNumber=10000

This php script will then return a new table cell which I would then like to appear as the 2nd cell in the form. It contains a new select menu with the values changing depending on the selection in the first select menu. This php page is working well manually, but I'm at the point now where I need to have it triggered when the user makes a selection from the Project Number menu.

I'm new to AJAX and would like to start with a simple example one step at a time whilst I learn. I'm happy to use jQuery if that makes things easier.

Appreciate any pointers to what the basic elements I need to include (assuming at least one js file etc).

Answer 1

I have something very similar that I use:

<select name="selectProject" id="selectID" onChange="showUser(this.options[selectedIndex].value)">

    <?php
        // Loop through and list each project
        foreach ($var as $row) {
            echo '<option value="'.$row['projectNumber'].'">'.$row['projectName'].'</option>';
        }
    ?>

</select>

<label>Project Name</label>
<input id="projectName" type="text" class="span3" name="projectName">   

The above just calls the showUser function with the parameter that is the projectNumber

Then below that I have:

<SCRIPT TYPE="text/javascript">

    // Function to fill in form fields
    function showUser(str)
    {
    if (str=="")
      {
      document.getElementById("").innerHTML="";
      return;
      }
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            var obj = eval('(' + this.responseText + ')');


            document.getElementById("projectName").value=obj.projectname;
        }
      }
    xmlhttp.open("GET","http://url.com/ajax/"+str,true);
    xmlhttp.send();
    }
</SCRIPT>

This script will call the url url.com/ajax/whateverIdIsSelected

From that page, you want to do whatever you have to do with your query.

As for what to return, I have this set up to use json, which I why I have the line

 var obj = eval('(' + this.responseText + ')');

this.reponseText is what is returned from the ajax page. My return call looks like this

$projectData = json_encode($project);

echo $projectData;

Where $project is an array containing your project's attributes.

I'm not very good with ajax or js, but I got this working the way I like it. Let me know if you have questions

Answer 2

Pass id to the option select list

<select name="ProjectNumber" id="ProjectNumber">

Then call a method having these and then parse it via Ajax call.

var pvalue = document.getElementById('ProjectNumber').value;
var url = 'getProjectPhases.php?projectNumber='+pvalue;

Answer 3

First you need to bind the JQuery change() Handler to your drop down menu, calling a function that starts the ajax request, have a look at the jQuery get function you need to do something like this:

$.get("getProjectPhases.php", { projectNumber: this.val() }, function(data){
   //Update your output using the data var
);

where data is the output of getProjectPhases, so it might be a good idea to just output plain text and no html tags or what ever.