How to create jQuery if statements from php array? - php

Question

I have array with both image colour and image id values.
I can echo this info, but I don't know how to get this into js file.
My js file is like this:
$(document).ready(function(){
var colour = false;
$('.options').click(function(){
colour = $(this).val();
console.log(colour);
if(colour == 'White'){
var imageid = 758;
}
else if(colour == 'Black') {
var imageid = 752;
}
else if(colour == 'Light Oak') {
var imageid = 755;
}
else if(colour == 'Rosewood') {
var imageid = 757;
}
else if(colour == 'Green') {
var imageid = 754;
}
else if(colour == 'Red') {
var imageid = 756;
}
else if(colour == 'Blue') {
var imageid = 753;
}
else {
var imageid = colour;
}
$('.options-input').val(imageid);
console.log(this);
$.post("index.php", { image_id: imageid }, function(results) {
$('body').html(results);
console.log(results);
});
console.log(url);
});
});
I am doing this manually at the moment and on click I can post imaged to my index.php
$_POST['image_id'];
Works from there.
Problem is that I want to create js statement dynamically depending on what values new array will have.

Answer 1

You can mix jQuery and php as suggested, but I prefer to avoid doing that. Instead, you can add some element to the DOM (or even an attribute of some other element) that has this data and fetch it later:
<?php echo '<span id="colour" hidden="hidden">Light Oak</span>'; ?>
if (colour == $("#colour").text()) {
// ...
}

Answer 2

Please do not use so many if statements! You could use the following for example:
// JavaScript / jQuery
var imageid,
colorObj = {
"White": 758,
"Black": 752,
"Light Oak": 755
};
if (colorObj[colour] !== undefined) {
imageid = colorObj[colour];
}
That easy! With PHP you could create your script like:
<?php
echo '<script type="text/javascript">var imageid,colorObj={';
$count = count($image);
for ($i = 1; $i <= $count; ++$i) {
echo '"' . $colour . '":' . $image[$i];
if ($i < $count) {
echo ',';
}
}
echo '};if(colorObj[colour]!==undefined){imageid=colorObj[colour]}</script>';

Answer 3

After you’ve changed your question I’d like to answer again. It seems like you want to deliver an image according to the color a user has selected from a element within the page. You haven’t posted your PHP script, but let me tell you that what you’re doing right now would be way better to be done via PHP.
$(document).ready(function () {
$('.options').click(function () {
var color = $(this).val();
if (color !== undefined && color !== null && color !== '') {
$.post('index.php', {color: color}, function (response) {
$('body').html(response);
});
}
});
});
And in your PHP file do the following:
<?php
if (isset($_POST['color']) && !empty($_POST['color'])) {
$colors = array(
'White' => 1234,
'Black' => 4321,
);
if (array_key_exists($_POST['color'], $colors)) {
echo $colors[$_POST['color']];
}
}

Answer 4

ugly method
<script>
<?php
foreach ($images as $index => $imageid) {
if ($index > 0) echo "else ";
echo "if (colour == '$colour') {\n";
echo " var imageid = $imageid;\n";
echo "}\n";
}
?>
</script>
less ugly method
<?php
switch($color) {
case 'White':
$imageid = 758;
break;
case 'Black':
$imageid = 752;
break;
case 'Light Oak':
$imageid = 755;
break;
}
echo "<script>var imageid = $imageid;</script>";
?>