jQuery ajax get request to php not retrieving any data

Question

I am trying to display the full name of the selected city from the dropdown in the paragraph. But the jQuery ajax call is giving no output.

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Learn Javascript</title>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<select id="states">
<option> LDH </option>
<option> JLD </option>
<option> CHD </option>
</select>
<br/>
<p>The Full name is: <span id="fullname"></span></p>
<script>
$(document).ready(function() {
    $('#states').change(function() { 
    selectedState = $('#states option:selected').text();
    $.get('learn.php?state='+selectedState, function(data) {
        $('#fullname').html(data);      
    });
        });
});
</script>
</body>
</html>

learn.php

<?php 

 switch ($_GET['state']) {
     case 'LDH' : 
     echo 'Ludhiana';
     break;
     case 'JLD' :
     echo 'Jalandhar';
     break;
     case 'CHD' :
     echo 'Chandigarh';
     break;  
 }
?>

When the dropdown state is changed, this is supposed to print the full name of the selected city by retrieving data from the php file.

the error is here: $_GET [$state] should be $_GET['state'] — k102
– k102, Commented Oct 30, 2013 at 6:56
@k102 i was checking to see if it echoes, actually there is $_GET['state'] & not working. — mbaljeetsingh
– mbaljeetsingh, Commented Oct 30, 2013 at 6:58
did you try selectedState = $(this).val();? and try alert(selectedState ); you'll get to know, wthr any data being passed or not. — Manjunath Hegde
– Manjunath Hegde, Commented Oct 30, 2013 at 7:00
@ManjunathHegde i don't think it will alert anything, as selectedstate is only initialized after the dropdown item changes. Or correct me if i am wrong? — mbaljeetsingh
– mbaljeetsingh, Commented Oct 30, 2013 at 7:04
@BaljeetSingh, ok, so can you look in firebug (or whatever) console - what exactly is sent to the server and what is the answer? — k102
– k102, Commented Oct 30, 2013 at 7:04

guri · Accepted Answer · 2013-10-30 08:00:35Z

1

Problem is with your spaces inside the option tag.

you can get results by using one method from given below 2 methods

Method 1:

<select id="states">
<option value="LDH"> LDH </option>
<option value="JLD"> JLD </option>
<option value="CHD"> CHD </option>
</select>

and in jquery change From

selectedState = $('#states option:selected').text();

to

selectedState = $('#states option:selected').val();

Method 2

use the trim() method in your PHP file

switch (trim($_GET['state']))

teste fiddle is

answered Oct 30, 2013 at 8:00

guri

6842 gold badges8 silver badges27 bronze badges

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

Comments

aifarfa · Accepted Answer · 2013-10-30 07:20:19Z

1

Could you alert formatted url or log to console on $.get() .fail()

$('#states').change(function() { 
    selectedState = $(this).val();
    url = 'learn.php?state=' + selectedState;
    alert(url);
    $.get(url, function(data) {

        $('#fullname').text(data);      
    })
    .fail(function(xhr, status, error) {
        console.log(xhr.status);
        console.log(error);
    });
});

answered Oct 30, 2013 at 7:20

aifarfa

3,9492 gold badges25 silver badges35 bronze badges

1 Comment

aifarfa Over a year ago

ok, is your script src path correct? type $ enter in your console is it a function.. or 'undefined' ?

rajesh kakawat · Accepted Answer · 2013-10-30 07:41:35Z

1

You have space in your text ie in option text.

So alway use value attribute.

Change your code to

    <select id="states">
        <option>LDH</option>
        <option>JLD</option>
        <option>CHD</option>
    </select>

answered Oct 30, 2013 at 7:41

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

Collectives™ on Stack Overflow

jQuery ajax get request to php not retrieving any data

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related