Search code examples
jquerymysqldynamic-data.post

get row from mysql when box filled with jquery .post()


i want to get data from mysql db, first user select db, then enters id #

select db<select id="db" name="db_name">
                <option value="">-choose-</option>
                <option value="ekoloji_db">ekoloji</option>
                <option value="ejobios_db">ejobios</option>
                <option value="ejen_db">ejen</option>
    </select><br/>
        <table>
            <tr><td> article id:  <input id="articleID" type="text" name="Article_ID" size="3"/></td>
            <td><div id="showarticle">

            </div></td>
            </tr></table>

i want to show article title after article id has been input, but with no page refresh. since i am newbie with jquery, i found .post() and implemented in a naive way,

$(document).ready(function(){
            $("#db").change(onSelectChange);
    });
        function onSelectChange(){
            var selected = $("#db option:selected");
            var output = "";
            output = selected.text() ;
        $.post('db_connect.php', {db: "selected"}, function(show){
            $("#showarticle").html(show);
        });}

when db is selected from dropdown, it shows article title within showarticle div, but what i want is, make it visible after article id entered into textbox.

what comes from php is string, and i must post both dropdown value and aricle id, then show it. but i am stuck.

event sequence should be :

  1. user selects db from dropdown
  2. user input article ID
  3. just after article ID is entered, i want to show from selected db, selected article's name..

any help is deeply appreciated..


Solution

  • Try this :

    $(document).ready(function(){
       $("#articleID").blur(function() {
           var articleid = $(this).val();
           var selected = $('#db').val();
           $.post('db_connect.php', {"db": selected, "articleid" : articleid},           
               function(show){
                   $("#showarticle").html(show);
               }
           )
       });
    });
    

    Docs for .blur() are here You can use the blur listener and implement a function at the same time.

    I get the value from this which is the input and then the current selection (value) from db which is your select list. The post that data to the server.