load data from mysql with jquery and php

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"

Hi, welcome to Stackoverflow. You'll need to tell us what the code is doing, what errors you're seeing, as well as what the expected behavior is and what the actual behavior is. Telling us there is simply a problem does not give us a lot to go on. You can use the **edit** link under the question to add more details. Good luck! — jamesmortensen, May 06 '12 at 07:39
If you use jQuery why don't you use selector in `document.getElementById('ddlAccount').value` like `$('#ddlAccount').val()` — s.webbandit, May 06 '12 at 07:46

thecodeparadox · Accepted Answer · 2012-05-06T07:52:29.213

0

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:

$('#ddlAccount').on('change', fires when dropdown change
$.get('test.php?accountInfo=' + $(this).val().. send a get(ajax) request to test.php with value selected from drop down
parameter response with in $.get() second parameter callback function is the response from the server
'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()

edited May 06 '12 at 07:52

answered May 06 '12 at 07:46

thecodeparadox

86,271
21
138
164

I tried this but nothing happened, input element still doesn't appear in the page. – Yasmeen May 06 '12 at 08:00
I'm using Smarty. Could this be a problem?! – Yasmeen May 06 '12 at 08:02
don't think so that Smarty cause problems. Does you php script work well? debug the response with `console.log(response)` just before `$('div#divAccountNum').html(response)` – thecodeparadox May 06 '12 at 08:03
There are no errors in php. I also echo-ed an alert with the returned account number in php and it appeared. – Yasmeen May 06 '12 at 08:11
replace the line in your php `echo "";` with `echo '';` and also remove `html` from `$.get()` – thecodeparadox May 06 '12 at 08:14
Ok this works but i removed 'function load1(){}' and leave the rest in '$(document).ready()'. But there is another problem which is it loads the whole form again after the input element. Thanks for your help and patience. – Yasmeen May 06 '12 at 08:36

score 0 · Answer 2 · answered May 06 '12 at 07:48

0

To get selected option value from select input use:

$('#ddlAccount option:selected').val()

answered May 06 '12 at 07:48

s.webbandit

16,332
16
58
82

load data from mysql with jquery and php

2 Answers2