Pass dynamic variables to Javascript function? [duplicate]

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
– Guilherme David da Costa, Commented Oct 25, 2011 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, How to pass a PHP variable to Javascript?, and Pass PHP variable to Javascript code 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
– Stephen P, Commented Oct 25, 2011 at 21:39
It gets even better if I quote it as pass "php variable" to javascript — Stephen P
– Stephen P, Commented Oct 25, 2011 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
– James, Commented Oct 26, 2011 at 16:42

swatkins · Accepted Answer · 2011-10-25 19:44:09Z

1

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

edited Oct 25, 2011 at 19:44

answered Oct 25, 2011 at 19:37

swatkins

13.6k4 gold badges50 silver badges79 bronze badges

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

1 Comment

James Over a year ago

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.

Collectives™ on Stack Overflow

Pass dynamic variables to Javascript function? [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related