CODEWITHSUNDEEP
phpjquery
Chriser
Chriser

Reputation: 177

How to create jQuery if statements from php array?

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.

Upvotes: 1

Views: 174

Answers (4)

Fleshgrinder
Fleshgrinder

Reputation: 16253

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

Upvotes: 0

Fleshgrinder
Fleshgrinder

Reputation: 16253

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

Upvotes: 1

Andreas Linden
Andreas Linden

Reputation: 12721

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

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191749

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

Upvotes: 2

Related Questions