Pass dynamic variables to Javascript function? [duplicate] - php

Question

This question already has answers here:
How do I pass variables and data from PHP to JavaScript?
(19 answers)
Closed 8 years ago.
<?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]'] ??

Answer 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