Question

I have a drop down list (ddlAccount) which i can choose an item from it and do a db query in test.php to retrieve corresponding data, then output an input element with the returned data.

This is my javascript code:

function load1(){
$('#divAccountNum').load('test.php?accountInfo=' + document.getElementById('ddlAccount').value , '' ,function() {
alert('Load was performed.')}); 
}

load1 function called when i change the dropdown list items, and it takes the value of the selected option and sends it to test.php in a parameter called “accountInfo”.

my html:

  <select name="ddlAccount" id="ddlAccount" onchange="load1();">
    <option value="1"> Account1</option>
    <option value="2"> Account2</option>
    <option value="3"> Account3</option>
  </select>

  <div id="divAccountNum" >
  </div>

And test.php :

if($_GET['accountInfo'])
{
    $account = $accountDAO->load($_GET['accountInfo']); //mysql query
        //print an input holding account number as its value
    echo "<input type='text' name='txtAccountNum' id='txtAccountNum' value='".$account->accountnumber."'/>"; 
}

The problem is that nothing happened when i choose an option (nothing appear in div (divAccountNum))
Any suggestions? Thanks in advance.

Edit:
I used @thecodeparadox ‘s bit of code and it works and i found a solution for the problem that i mentioned in the comments below which is that when choosing one item from the dropdown list it shows the value in input element and loads the form again. The solution is in:
jQuery Ajax returns the whole page
So my jquery code now looks like:

$(document).ready(function(){
  $('#ddlAccount').on('change', function() {  
$.get('testJquery.php?accountInfo=' + $(this).val(), function(accountNum) {
    //console.log(accountNum);
    $('input#txtAccountNum').val(accountNum);
   });
});

And testJquery.php :

if($_GET['accountInfo'])
{
    $account = $accountDAO->load($_GET['accountInfo']);
    $accountNum = $account->accountnumber;
    echo $accountNum;
}

And at last i added input element in divAccountNum which has id=”txtAccountNum”

Answer 1

Though you don’t give enough info about your problem, but you can try this:

function load1(){
  $('#ddlAccount').on('change', function() {  
    $.get('test.php?accountInfo=' + $(this).val(), function(response) {
       $('div#divAccountNum').html(response);
    }, 'html');
  });
}

NOTE:

1. $('#ddlAccount').on('change', fires when dropdown change
2. $.get('test.php?accountInfo=' + $(this).val().. send a get(ajax) request to test.php with value selected from drop down
3. parameter response with in $.get() second parameter callback function is the response from the server
4. 'html' as third parameter of $.get() for data type you return, as you return a html so it is html.

for more info read:

change()

$.get()