CODEWITHSUNDEEP
javascriptjquery
rryanp
rryanp

Reputation: 1027

Update table data based on dropdown box selection

I have an html table of data with a drop down box in each row. If a user changes the value of the drop down box, I want the data in that row to change (based on a database call to lookup the associated data for the new value of the dropdown box).

As a basic example, suppose a table showed players on a basketball team along with their heights. Imagine the player is selected from a drop down box...I want the height for that player to change in the html table if the user changes the player in that row with the drop down box. For example, if in the table below the user changed the player of Kobe Bryant to some other player (like to Ray Allen), the Height column would change based on a database lookup of Ray Allen's height.

Player           Height
[Kobe Bryant V]   6'6"
[Dwyane Wade V]   6'4"

I would like to do this using jquery or javascript. Also, I'm using CakePHP for my site, but that may not be relevant if this is all handled by jquery or javascript. Thanks for any help! Ryan

Upvotes: 0

Views: 2903

Answers (1)

S Pangborn
S Pangborn

Reputation: 12739

It's fairly easy with JQuery. Just attach an onchange event to the dropdown, and make that event make an AJAX/AJAJ request that can return the new HTML values that you need.

<select id="player">
     <option value="KobeBryant">Kobe Bryant</option>
     <option value="DwayneWade">Dwayne Wade</option>
</select>

and the jQuery to make the request (I'm using JSON here, you could also use XML)

$("#player").change( function (event) {
     $.getJSON('player.php?player=' + $(this).val(), function (json) { 

          // Change data in the table

     });
});

http://docs.jquery.com/Ajax/jQuery.getJSON

player.php would need to return JSON in this case, based on the player you send it.

http://www.json.org/example.html

Upvotes: 2

Related Questions