jquery to get database query based on user click and populate select list

Question

I am working on a form where a user can select a letter from A - Z to select a list of users whose username begins with that letter.

What i am trying to do is when the user clicks a letter, a php script is called to do a database query that pulls any username which begins with the clicked letter.

I have found this page which has started me off http://openenergymonitor.org/emon/node/107 and also this one which is closer to what i want to do Simple Ajax Jquery script- How can I get information for each of the rows in the table?

What i want to do with the returned results is put them in a SELECT list and also when a user click a different letter, that list contents is replaced with the new query results.

What i'm not sure is how to and if possible pass the letter to the php script so i can search the database for usernames that begin with that letter.

EDIT: I have got it hopefully improved to this but i'm getting Ajax error: ParseError

this is my code so far

<div>
        <ul>
            <li class="alphabets" id="All">All</li>
            <li class="alphabets" id="A">A</li>
            <li class="alphabets" id="B">B</li>
            <li class="alphabets" id="C">C</li>
            <li class="alphabets" id="D">D</li>
    </ul>
</div>
<div id="recipients">
    $(document).ready(function(){
                $("li.alphabets").click(function(){
                    var the_letter = $(this).text();
                    alert(the_letter);

                    $.ajax({                                      
                        url: 'php/selectuser.php', type: 'GET', data: {'letter':the_letter}, dataType: 'json',  success: function(rows) {
                            var options = '';
                            for (var i in rows) {
                                var row = rows[i];          
                                var id = row[0];
                                var vname = row[1];

                                options += '<option value="' + id + '">' + vname + '</option>';
                            } 
                            $("#userlist").html(options);
                        } 
                    });
                });
            });
    <select id="userslist" name="recipients" size="5">



    </select>
</div>

Jeremy Harris · Accepted Answer · 2012-08-01 15:47:26Z

2

jQuery's .ajax() method has a parameter called data which allows you to pass variables:

// Get letter from SELECT element
the_letter = $("#myselect").val();

$.ajax({ 
  url:  'somepath/to/my/script.php',
  type: 'GET',
  data: {'letter':the_letter} 
});

It is passing it as a GET parameter, easily retreivable in your PHP script with:

$letter = $_GET['letter'];

answered Aug 1, 2012 at 15:47

Jeremy Harris

24.7k13 gold badges84 silver badges133 bronze badges

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

2 Comments

AdRock Over a year ago

Thanks for your quick reply. That makes sense. Can you please tell me how to get it in the SELECT list?

Jeremy Harris Over a year ago

See my changes. If you set your <select> element to have an id attribute of "myselect", then that would work.

Collectives™ on Stack Overflow

jquery to get database query based on user click and populate select list

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related