current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

I really tried it myself, and I did read other questions asked here and elsewhere, but I just can't seem to get it right. And yes, I am still learning, so the code might appear confusing to you...

I have 1 page called index.php.

On that page I have a drop-down list, and based on the item chosen, a picture on the very same page should change:

<select name="animal-pictures" id = "animal" onchange="setImage(this)">
<option value="/images/placeholder.jpg">Choose animal</option>
<option value="/images/lion.jpg">Lion</option></select>

<img class="resized" src="/images/placeholder.jpg" name="image-swap" />

This gets me to the javascript:

function setImage(select){
    var image = document.getElementsByName("image-swap")[0];
    image.src = select.options[select.selectedIndex].value;}

What I now need, is to get select.options[select.selectedIndex].label (for example "Lion") out of the script so that I can use it somewhere else on the page.

What I have come up with so far (among many other versions):

function setImage(select){
    var image = document.getElementsByName("image-swap")[0];
    image.src = select.options[select.selectedIndex].value;
    var data = select.options[select.selectedIndex].label;
    var url = "index.php?id=" + data;
    // alert(data);
    // alert (url);
    xmlhttp.open("GET",url,true);
    xmlhttp.send();}

And how I try to retrieve that variable in php:

<?php
$name = $_GET['id'];
echo $name ?>

alert(data) - gives me a window saying "lion"

alert (url) - gives me a window saying "index.php?id=lion"

But I just can't get those information out of the script -.-

I'd really appreciate help. Please bear in mind that I'm still new to this - and so far, I'm just trying to get something "that's working" - even if there are 50 better ways to code it.

share|improve this question
3  
Open the developer tools of your browser. Go to the network tab. Find the request that represents the XMLHTTP request you sent. Look at its details. You'll see "lion" in the response. You're not going to see it anywhere else, because where else would it appear? –  deceze Feb 10 at 15:38
    
Your code seems fine and PHP is getting the id you're sending. I think the question is what you want to do with it afterwards. –  Shomz Feb 10 at 15:40
    
what happens when you do alert('<?php echo $name?>'); –  tremor Feb 10 at 15:42
    
The thing is that I actually want the string "Lion" for example to be printed (echo) on the page (index.php) You choose one animal from the drop-down, the picture changes, and the name of the animal appears above the image (for example)... Later on, I want to use that string to do some database-search, and echo some info about the chosen animal (like where it lives etc) - but to do so, I'd like to have a variable inside php that holds the animal's name –  Stubi Feb 10 at 15:42

3 Answers 3

up vote 1 down vote

I think what youre looking for is a callbackfunction wich gives you the ResponseText from the php-file. Right?!

If so try this:

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
share|improve this answer
up vote 0 down vote

You should do something like that:

<script>
    var id = "<?php echo $_GET['id']; ?>";
</script>

Then you can use this variable in javascript. Make sure to do that before the other script is executed.

But I don't think the async call is a good example cause it does not cause a refresh. I'd rather do:

window.location = url;

Instead of:

xmlhttp.open("GET",url,true);
xmlhttp.send();
share|improve this answer
up vote 0 down vote

The thing is that I actually want the string "Lion" for example to be printed (echo) on the page (index.php) You choose one animal from the drop-down, the picture changes, and the name of the animal appears above the image (for example)...

But you don't need PHP for that. Make an object which will have the id, name and image url and instead of making an AJAX call, just read the new values from it. Here is an example:

var animals = {
    lion : {
        id: 1, // or you can use arrays if it's easier for you to have ids as keys
        name: "Lion",
        imageSrc: "path-to/lion-image.jpg"
    },
    "zebra" : {
        id: 2,
    // etc
    }
}

If you still want to use PHP, check the AJAX response and do the same thing I mentioned above.

UPDATE

The thing is that I actually want the string "Lion" for example to be printed (echo) on the page (index.php) You choose one animal from the drop-down, the picture changes, and the name of the animal appears above the image (for example)... Later on, I want to use that string to do some database-search, and echo some info about the chosen animal (like where it lives etc) - but to do so, I'd like to have a variable inside php that holds the animal's name

In this case, you should probably make a separate landing PHP page for the AJAX call. That page would echo all the animal data it retrieves (from the database). Ideally, you can just json_encode your animal data and echo it.

Then, on your original page, in the JS part, you'll watch for the xmlhttp response, and if it's successful (xmlhttp.readyState == 4) and you get the data, you can just JSON.parse the returned json string.

share|improve this answer
    
But he also wants to do database research with the string "Lion". So he needs php. –  Martin Feb 10 at 15:50
    
@Martin Right, I just saw he updated the comment. I'll update my answer. –  Shomz Feb 10 at 15:51

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.