Grabbing Two Values Javascript

Question

I am grabbing the values from a listbox and passing it on to another listbox, I had everything working with one value $Lid, but now I need two $Lid and $Cid, is this the correct way to do this?

    $(document).ready(function()
{

 $(".Doggie").change(function()
{
var LocationString = $(this).find(":selected").val();
    var CityString = $(this).find(":selected").val();
    $.ajax({
        type: "POST",
        url: "ajax_city.php",
        data: {Lid : LocationString, Cid : CityString},
        cache: false,
        success: function (html) {
            $(".Kitty").html(html);
        }
    });
});

$('.Kitty').live("change",function(){
    var LocationString = $(this).find(":selected").val();
    var CityString = $(this).find(":selected").val();
    $.ajax({
        type: "POST",
        url: "ajax_area.php",
        data: {Lid : LocationString, Cid : CityString},
        cache: false,
        success: function (html) {                                     
$(".Pig").html(html);
} 
});

});
});
</script>
</head>
<body>
        <div id="frame1">
        <label>Place :</label>
        <select name="Doggie" class="Doggie" id="Doggie">
        <option selected="selected">--Select Place--</option>
        <?php
                $sql = mysql_query("SELECT tblLocations.RestID as Lid, tblLocations.CityID as Cid, tblRestaurants.RestName as name
            FROM tblRestaurants INNER JOIN tblLocations ON tblRestaurants.RestID = tblLocations.RestID
             GROUP BY tblLocations.RestID, tblRestaurants.RestName
            ORDER BY tblRestaurants.RestName ASC");
        while($row=mysql_fetch_array($sql))
        {
        echo '<option value="'.$row['Lid'].''.$row['Cid'].'">'.$row['name'].'</option>';
        } ?>
         </select>
        <label>City :</label>
         <select name="Kitty" class="Kitty" id="Kitty">
         <option selected="selected">--Select City--</option>
        </select>
        <label>Area: :</label>
         <select name="Pig" class="Pig" id="Pig">
        <option selected="selected">--Select Area--</option>
        </select>
        </div>

</body>
</html>

And...

<?php
require ('config.php');

if ($_POST['Lid']) {
    $Lid = $_POST['Lid'];
    $sql = mysql_query("SELECT tblLocations.RestId as Lid, tblLocations.CityID as Cid,     tblCities.CityName as name
                FROM tblLocations INNER JOIN tblCities ON tblLocations.CityID = tblCities.CityID
                WHERE tblLocations.RestID = $Lid
                GROUP BY tblLocations.RestID, tblCities.CityName
                ORDER BY tblCities.CityName ASC");
    echo '<option selected="selected">--Select City--</option>';
    while ($row = mysql_fetch_array($sql)) {
        echo '<option value="' . $row['Lid'] . '' . $row['Cid'] . '">' . $row['name'] . '</option>';
    }
}

?>

Right now its not returning anything so I have to assume its wrong. Thank you.

marteljn · Accepted Answer · 2013-01-18 03:21:54Z

1

I would recommend making the changes below:

    var LocationString = $(this).find(":selected").val();
    var CityString = $(this).find(":selected").val();
    $.ajax({
        type: "POST",
        url: "ajax_city.php",
        data: {Lid : LocationString, Cid : CityString},
        cache: false,
        success: function (html) {
            $(".Kitty").html(html);
        }
    });

You were adding two data values, which is not the right way of doing it. Simply pass a single literal object with your desired key and values and allow JQuery to do the formatting for you.

edited Jan 18, 2013 at 3:21

answered Jan 18, 2013 at 3:13

marteljn

6,5263 gold badges32 silver badges44 bronze badges

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

4 Comments

ME-dia Over a year ago

Ok I did the changes, still no return of data. Is this line correct? if ($_POST['Lid']) { $Lid = $_POST['Lid'];

marteljn Over a year ago

@ME-dia are your elements with the class .doggie a select box? If so,make the change I just made above $(this).find(":selected").val();

marteljn Over a year ago

@ME-dia also, why are you assigning the same value to two different variables?

ME-dia Over a year ago

It should be two different values. LID and CID. One is LocationID and the other is CityID. I need both values to run my query successfully.

Ricardo Lohmann · Accepted Answer · 2013-01-18 03:20:19Z

0

I don't understand why you store the same value in two vars:

var LocationString = 'Lid=' + $(this).val();
var CityString = 'Cid=' + $(this).val();

It can be simplified to:

var LocationString = $(this).val();

And then you only have one value, so data should be the following format

data: {
    'Lid': LocationString
}

edited Jan 18, 2013 at 3:20

answered Jan 18, 2013 at 3:12

Ricardo Lohmann

26.4k7 gold badges86 silver badges84 bronze badges

6 Comments

ME-dia Over a year ago

I did the change, however; still not getting any data. Is this part correct on the second code snippet? if ($_POST['Lid']) { $Lid = $_POST['Lid'];

marteljn Over a year ago

@ME-dia you need to change the value of LocationString and CityString like I did in my answer.

Ricardo Lohmann Over a year ago

@ME-dia You make some unnecessary things, take a look the update. Your php looks ok.

ME-dia Over a year ago

LID and CID are actually two different values/ I was just pulling the LocationID "LID" from the tblLocation, but as it turns out, I need the CityID "CID" as well. Thats the reason for the two.

marteljn Over a year ago

@ME-dia you should post your html, i think the problem is what input elements you are binding the change event to. $(this).val() wont work for select boxes.

|

Kanishka Panamaldeniya · Accepted Answer · 2013-01-18 03:24:13Z

0

data should be the format

data: {Lid : LocationString, Cid : CityString},

and also check what is the result of your query

check it by

print_r(mysql_fetch_array($sql))

if your query does not have any results , echo inside while loop wil not work

answered Jan 18, 2013 at 3:24

Kanishka Panamaldeniya

17.6k31 gold badges128 silver badges195 bronze badges

Comments

ME-dia · Accepted Answer · 2013-01-19 03:56:19Z

This did it.

$(document).ready(function()
            {
            $(".Doggie").change(function()
            {
                var LocationString ='Rid='+ $(this).val();
            $.ajax({
            type: "POST",
            url: "place_city.php",
            data: LocationString,
            cache: false,
            success: function (html) {
            $(".Kitty").html(html);
            }
            });
            });

            $('.Kitty').live("change",function(){
            var Rid = $('#Doggie').val(),  // This is the value of the id="Doggie" selected option
            Cid = $(this).val(); // This is the value of the id="Kitty" selected option
            //alert("Rid = " + Rid + " Cid = " + Cid); 
            $.ajax({
            type: "POST",
            url: "place_area.php",
            data: {"Rid":Rid,"Cid":Cid}, 
            cache: false,
            success: function (html) {
            //alert('This is what is returned from the php script: ' + html);                                                           
            $(".Pig").html(html);
            }});});});

Collectives™ on Stack Overflow

Grabbing Two Values Javascript

4 Answers 4

4 Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related