Pass dynamic variables to Javascript function?

Question

<?php if ($option['type'] == 'select') { ?>
            <div id="option-<?php echo $option['product_option_id']; ?>" class="option">
              <?php if ($option['required']) { ?>
              <span class="required">*</span>
              <?php } ?>
              <b><?php echo $option['name']; ?>:</b><br />
              <select name="option[<?php echo $option['product_option_id']; ?>]">
                <!-- <option value=""><?php echo $text_select; ?></option> -->
                <?php foreach ($option['option_value'] as $option_value) { ?>
                <option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
                <?php if ($option_value['price']) { ?>
                (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                <?php } ?>
                </option>
                <?php } ?>
              </select>
              <?php if ($option_value['image'] != 'image/' && $option_value['image'] != 'image/no_image.jpg' ) { ?><?php 
    list($simgwidth) = getimagesize($option_value['image']);
    $selectimgpos = $simgwidth + 35; 
    ?>
<center>
<span id="img<?php echo $option['product_option_id']; ?>" style="position: absolute; display: none; left: -<?php echo $selectimgpos; ?>px; background: #eee; padding: 10px; border: 1px dotted #666; z-index: 90;">
<img src="<?php echo $option_value['image']; ?>">
<br /><strong><?php echo $option['name']; ?></strong>
</span></center><?php } ?>
            </div>
            <br />
<?php } ?>

Hi, I am new to programming and I need help with the above section of code. Normally this code just displays a Select dropdown box with options.

I've modified it by adding an extra image at the bottom inside a span. I've also calculated the width and repositioned the image based on its -width.

What I'd like to do next is have a javascript where if the user hovers or onFocus on the Select box will show the image inside the span. And if they change the select box, the image will change based on what they selected. I'm thinking onBlur to hide the pic after.

I've found some javascripts to do this but I need to pass dynamic variables from the php.

I found this javascript, but the code doesn't let me pass variables.

         <script type="text/javascript">
function swapImage(){
    var image = document.getElementById("imageToSwap");
    var dropd = document.getElementById("dd");
    image.src ="images/"+dropd.value+".jpg";    
};
</script>

Due to constantly changing IDs generated by php I can't be using static variables.

Any help would be appreciated. Thanks all.

PS: $option_value['image'] is a php array. How can I display the first or last element in this array? Normally it's something like array_[n] but this one already has brackets? $option_value['image[0]'] ??

You should consider using any js framework to solve your problem. — Guilherme David da Costa, Oct 25 '11 at 19:32
Using the search box at the top of this page I entered `pass php variable to javascript` and came up with [pass php variable to javascript](http://stackoverflow.com/questions/4845228/), [How to pass a PHP variable to Javascript?](http://stackoverflow.com/questions/3306314/), and [Pass PHP variable to Javascript code](http://stackoverflow.com/questions/6805197/) among hundreds of hits. This question, in its many different forms, has got to be one of the most asked questions in "recent" times. — Stephen P, Oct 25 '11 at 21:39
It gets even better if I quote it as `pass "php variable" to javascript` — Stephen P, Oct 25 '11 at 21:42
Sounds fair, but my question was a compound question (1) access php arrays, (2) how to modify the javascript, not PHP, to accept multiple variables. — James, Oct 26 '11 at 16:42

swatkins · Answer 1 · 2011-10-25T19:44:09.690

To pass php variable to javascript, you just need to echo them out in the right place:

// in your php file
<?php
    $image_to_swap = "my_id_of_image_to_swap";
    $element = "my_id_of_element";
?>
<script type="text/javascript">
function swapImage(){
    var image = document.getElementById("<?php echo $image_to_swap; ?>");
    var dropd = document.getElementById("<?php echo $element; ?>");
    image.src ="images/"+dropd.value+".jpg";    
};
</script>

As for your PS:

PHP arrays can be multidimensional, so for the following array:

$image = array(
    0 => array(
             0 => 'apple',
             1 => 'banana'
         ),
    1 => array(
             0 => 'broccoli',
             1 => 'cauliflower'
         ),
    2 => array(
             0 => 'peanut',
             1 => 'walnut'
         )
);

You can access the items as:

echo $image[0][0]; // outputs apple
echo $image[2][1]; // outputs walnut

And you can use strings as keys, so you could also name your keys and access them with strings:

$image = array(
    'fruits' => array(
             0 => 'apple',
             1 => 'banana'
         ),
    'vegetables' => array(
             0 => 'broccoli',
             1 => 'cauliflower'
         ),
    'nuts' => array(
             0 => 'peanut',
             1 => 'walnut'
         )
);

You can access the items as:

echo $image['fruits'][0]; // outputs apple
echo $image['nuts'][1]; // outputs walnut

Thank you for your answer. It was very informative. Although your solution to the JS is php-based. This would mean it would generate a different javascript for every option?? Isn't it cleaner to modify the javascript function itself to accept variables? So instead of swapImg() it becomes swapImg(source-img-to-swap,swap-to-this-img,selectbox-element) and somehow this is passed to the javascript. — James, Oct 26 '11 at 16:48

Pass dynamic variables to Javascript function?

1 Answers1