Jquery to populate <table> based on <select>

Question

So I've got a form with a drop down at the top that is populated with values from a mysql table. Basically this form is to allow the addition of players to a team.

    $seasonid = $_SESSION['SEASON_ID'];
$sql="SELECT TEAM_ID, TEAM_NAME FROM TEAMS WHERE SEASON_ID=$seasonid";
$result=mysql_query($sql);
$options="";
while ($row=mysql_fetch_array($result)) {
        $tid=$row["TEAM_ID"];
        $tname=$row["TEAM_NAME"];
    $options.="<OPTION VALUE=\"$tid\">".$tname;
}

What I'd like to do is when a team is selected from the list the database is queried with the TEAM_ID and all the players from that team are shown in a list below the form so that the person populating the form can see who is already on the team they've selected.

Jeff Lambert · Accepted Answer · 2011-04-18 14:26:22Z

2

HTML

<select id = 'teamSelect'>....options....</select>
<div id = 'tableContainer'></div>

Javascript

$(function() {
    $("#teamSelect").bind("change", function() {
        $.ajax({
            type: "GET", 
            url: "path/to/server/script.php",
            data: "tid="+$("#teamSelect").val(),
            success: function(html) {
                $("#tableContainer").html(html);
            }
        });
    });

});

The javascript code will perform an ajax request to a server side php script (in the code it is the path/to/server/script.php) This script will query your database and simply output the table as you would like it. The team that is selected will be in the $_GET variable 'tid'.

answered Apr 18, 2011 at 14:26

Jeff Lambert

24.7k4 gold badges72 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

chrisp_68 · Accepted Answer · 2011-04-18 14:30:54Z

What you need to do is :

1) attach a change handler to the dropdown using jQuery (http://api.jquery.com/change/)

2) use $.get() (http://api.jquery.com/jQuery.get/) to make an async call to the server to query the database

3) return the data (either as html directly or as a JSON See http://api.jquery.com/jQuery.getJSON/)

4) in your $.get(), success handler either :
      push the resultant html into a container element on the form (see http://api.jquery.com/html/), eg a <div> <ul> or <table> depending on what you returned from the server

or    parse the JSON and generate the html before rendering it into the form.

You could use the tmpl plugin to format the html if you feel brave. http://api.jquery.com/jquery.tmpl/

Collectives™ on Stack Overflow

Jquery to populate <table> based on <select>

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related