I have a PHP array of elements

Now I would like to create a link or a button for each of the array elements, when clicked, the array value should appear inside a specific div.

here is my code:

<?php
$array = array('apple', 'banana', 'orange');
foreach($array as $element) {
?>
    <a href="#" onclick="return false;" id="showElement"><?php echo $element; ?></a><br />
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("#showElement").click( function() {
            $("#hot").append('<?php echo $element; ?><br />');
        });
    });
    </script>

    <?php
    }
    ?>
    <div id="hot"></div>

This just doesn't work the way I'd like it to. It displays the separate links for each of the array elements, but when I click on the first one it just displays all the three array elements, instead of just the intended one. The other two links do nothing.

Any help would be appreciated guys, my approach may even be pletely the wrong way to do it, so please lead me to the correct way.

Thanks

I have a PHP array of elements

Now I would like to create a link or a button for each of the array elements, when clicked, the array value should appear inside a specific div.

here is my code:

<?php
$array = array('apple', 'banana', 'orange');
foreach($array as $element) {
?>
    <a href="#" onclick="return false;" id="showElement"><?php echo $element; ?></a><br />
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("#showElement").click( function() {
            $("#hot").append('<?php echo $element; ?><br />');
        });
    });
    </script>

    <?php
    }
    ?>
    <div id="hot"></div>

This just doesn't work the way I'd like it to. It displays the separate links for each of the array elements, but when I click on the first one it just displays all the three array elements, instead of just the intended one. The other two links do nothing.

Any help would be appreciated guys, my approach may even be pletely the wrong way to do it, so please lead me to the correct way.

Thanks

• php
• javascript
• jquery
• foreach

• Reusing the same id for multiple elements is not allowed. If you need to pass data from PHP to JS, use <?php echo json_encode($value); ?> instead of '<?php echo $value; ?>' (mind the quotes). – user1233508 Commented Dec 29, 2012 at 17:16
• Use either PHP or JavaScript to generate your data. You can't mix serverside and clientside languages like that. – Blender Commented Dec 29, 2012 at 17:19

3 Answers 3

I don't know what you want to achieve actually, but you should separate concerns [i.e. don't let php mess with js directly at least].

Consider injecting your values via data-* attributes, and retrieve them later via jQuery like this:

<?php foreach($array as $element): ?>

    <a href="#" class="yourClass" data-value="<?php echo $element; ?>"><?php echo $element; ?></a>

<?php endforeach; ?>

<div id="target"></div>

<script>

$(function(){

    var $target = $('#target')

    $('.yourClass').click(function(e){

        e.preventDefault()

        $target.append( $(this).data('value') )

    })

})

</script>

Remember then that id attribute should be unique, and cannot be repeated throughout DOM.

What about:

<?php
$array = array('apple', 'banana', 'orange');
$i=0;
foreach($array as $element) {
    echo '<a href="#" class="showElement" id="showElement'.$i.'">'.$element.'</a><br />';
    $i++;
}
?>

Then

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    var $target = $('#target');
    $(".showElement").click( function(e) {
        e.preventDefault();
        $target.append( $(this).text() );
    });
});
</script>

Try this

<?php
$array = array('apple', 'banana', 'orange');
foreach($array as $element) {
?>
    <a href="#" onclick="return false;" id="showElement-<?php echo $element; ?>"><?php echo $element; ?></a><br />
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("#showElement-<?php echo $element; ?>").click( function() {
            $("#hot").append('<?php echo $element; ?><br />');
        });
    });
    </script>

    <?php
    }
    ?>
    <div id="hot"></div>

The problem is that you're binding the same id's to your append function. I've changed your id names. You can simply change them using

$("#showElement-<?php echo $element; ?>")

So they get a different id name anyway.