Jquery $.get() returns undefined result from php script with JSON

Question

updated

Err i try to see more tutorial and i decided to use $.get() first since its easier and good for starting point..

so this is the script and i think it works correctly except it gives undefined result

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Display Json</title>
<script src="../_js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function()
    {
        $('#jsonButton').click(function()
        {
            var data = ''
            $.get('getJson.php', data, response);
        });//end click
    });//end ready

    function response(data)
    {
        $('#display').prepend('<p>' + data.name + data.phone + '</p>');
    }
</script>
<body>
    <div id="display">

            <input type="button" id="jsonButton" value="getJson!" />

    </div>
</body>
</html>

and this is the getJson.php simple php script that returns simple JSON object :

$data['name'] = 'username';
$data['phone'] = '08989808089';

header('Content-Type: application/json');
echo json_encode($data);

when i click the 'getJson' button, it displays undefined

did you use a browser debugger like firebug or the chrome dev tools ? — palmplam
– palmplam, Commented May 17, 2013 at 9:24

bipen · Accepted Answer · 2013-05-17 09:56:29Z

3

that is because your selector is incorrect

$('submit').click(function()
//-^^^^^----here

it should be

 $('input[name="submitButton"]').click(function(){
  ....  
}

OR give an id to your button and use id seletor with #

 <input type="submit" name="submitButton" value="getJson!" id="getjson"/>

  $('#getjson').click(function(){
   ......

OR you can use

$('input:submit').click(function(){ 
  .....
});

updated

and for undefined you can call the callback function .....

$.get('getJson.php', data, function(data){
    $('#display').prepend('<p>' + data.name + data.phone + '</p>');
});

edited May 17, 2013 at 9:56

answered May 17, 2013 at 9:21

bipen

36.6k9 gold badges51 silver badges62 bronze badges

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

1 Comment

Dave Lawrence Over a year ago

Pretty much the same answer as my own... posted at same time... yet 3 upticks and an accepted answer. And practically no feedback from the op. Won't bother with his questions again.

Adil Shaikh · Accepted Answer · 2013-05-17 09:21:42Z

0

You need to select the correct button to bind click event.

$('input:submit').click(function(){  });

answered May 17, 2013 at 9:21

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Comments

Dave Lawrence · Accepted Answer · 2013-05-17 09:21:54Z

0

I'm not 100% sure you've got the selector right. I'd give the button an id and use that.

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#mybutton').click(function()
        {
            $.ajax(
            {
                type: 'GET',
                url: 'getJson.php',
                dataType: 'json',
                success: function(jsonData)
                {
                    $('#display').prepend('<p>' + jsonData.name + '  ' + jsonData.phone + '</p>');
                }
            });//end ajax
            return false;
        });//end click
    });//end ready

</script>
    <body>
        <div id="display">

                <input id="mybutton" type="button" name="submitButton" value="getJson!" />

        </div>
    </body>

Read about proper jquery selectors here

http://www.w3schools.com/jquery/jquery_ref_selectors.asp

There are many different selectors you could use to attach the click event to that button.

Edit: Change the type of the input to button as well... submit is for a form

answered May 17, 2013 at 9:21

Dave Lawrence

3,9592 gold badges23 silver badges36 bronze badges

2 Comments

mohur Over a year ago

ermm thx for pointing that out, after change that, it still doesnt work :(

Dave Lawrence Over a year ago

Actually you should change the type of the input to button as well

Collectives™ on Stack Overflow

Jquery $.get() returns undefined result from php script with JSON

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related