show data after two textfield are filled

Question

i have a form, that consist of:

<input type="text" id="model">
<input type="text" id="serial">
<input type="text" id="lot_no">
<select id="line">

beside that i have data in settingdata table:

Model     Serial      Lot_no     Line
abc        0001         012a      1
abc        0101         022a      1

i want if i type abc in #model then 0101 in #serial,will show data from DB as:

#lot_no -> 022a
#line -> 1

i want for #lot_no and #serial can automaticalled filled after we type some data in 1st and 2nd textfield. how do i do that?

---

$('#serial').blur(function(){
         $.ajax({

how about mysql query for this?

Answer 1

From what i can make of your question you're looking for an ajax solution. The user is typing in the fields, you query the DB and the rest of the fields are filled automatically? Something like this?

Answer 2

What you need is to look into Ajax in jquery to retrieve your database data without refreshing the entire page. There are plenty of examples online you can start with:

http://api.jquery.com/jQuery.ajax/

http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/

Demo

http://www.devirtuoso.com/Examples/jQuery-Ajax/

Answer 3

Set up a client-side function that - when the serial and/or model textboxes lose focus, you fire off an Ajax call which retrieves the other 2 values. Then assign them to the other textbox and dropdown.

$('#serial').blur(function() {

  $.ajax({
        type: "POST",
        url: "yoururl?serial=x&model=y",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
          SetValues(msg);
        }
  });  
});

Then you obviously need some server-side logic to retrieve the two other values. For example, an ashx handler or a webservice, which does something like:

// Get results from the database, then return them in an anonymous object

return select new
      {
        Textboxvalue = "abc",
        Dropdownvalue = "xyz
      };

Finally, back in your client-side logic, take the results from the ajax call and use them to populate the second textbox and dropdownlist.

function SetValues(obj)
{
   $('#lot_no').val(obj.Textboxvalue);
   $('#line').val(obj.Dropdownvalue);
}

Obviously, there's some work that still needs to be done in the above code to make it work, but it should give you a general idea on how to proceed.

EDIT: my server-side example wasn't in php obviously, but should still give you the general gist of it.