How to create jQuery if statements from php array?

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.

If your js code is in your php file then you should be able to just escape your code as php in the variable assignment or better, use json_decode — elclanrs
– elclanrs, Commented Apr 20, 2012 at 21:45
Yes, more information is required here. What is the end goal? You're mixing server-side code (PHP) with client-side code (JavaScript). In most simple (i.e. non-AJAXy) cases, there's no interaction between the two... The server-side code takes the web request and sends back a response, and then the client-side code handles user interaction. — Thomas Kelley
– Thomas Kelley, Commented Apr 20, 2012 at 21:49

Explosion Pills · Accepted Answer · 2012-04-20 21:47:41Z

2

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()) {
   // ...
}

answered Apr 20, 2012 at 21:47

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

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

2 Comments

Thomas Kelley Over a year ago

+1 Yes, I'm pretty sure this is what the author is trying to accomplish. Also agree re: mixing JavaScript/PHP. It's not a good practice.

totallyNotLizards Over a year ago

agreed. through experience trying to mix jquery and php, i've found only blood sweat and tears. ESPECIALLY when you have to maintain your less than perfect code 6 months down the line, and every script on your page breaks when you update your PHP and remove that apparently useless var declaration...

Fleshgrinder · Accepted Answer · 2012-04-20 21:59:06Z

1

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>';

answered Apr 20, 2012 at 21:59

Fleshgrinder

16.4k5 gold badges54 silver badges56 bronze badges

Comments

Fleshgrinder · Accepted Answer · 2012-05-05 00:38:16Z

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']];
  }
}

Andreas Linden · Accepted Answer · 2012-04-20 21:56:00Z

0

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>";
?>

edited Apr 20, 2012 at 21:56

answered Apr 20, 2012 at 21:48

Andreas Linden

12.8k7 gold badges54 silver badges70 bronze badges

Collectives™ on Stack Overflow

How to create jQuery if statements from php array?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related