Hiding div with Javascript based on value of php variable

Question

I currently have a select box in my laravel blade:

<div style="text-align:center;">
   <div>
    <span style="color:#fff;"><strong>Sort by:</strong></span>
    <select id="filterText" class="uk-text-muted" style="margin-top:10px; width:33%; height:30px; font-size: 16px;" onchange="filterText()" >
      <option id="allitems" class="uk-text-muted" style="font-size: 16px;" selected data-default value="" selected data-default>All Items</option>
      <option id="popular" class="uk-text-muted" style="font-size: 16px;" value="" >Popularity</option>
      <option id="recent" class="uk-text-muted" style="font-size: 16px;" value="">Recently Ordered </option>
     </select>
   </div>

And I want to use JS to show/hide my .groupcontainer div based on the value of a PHP variable. I have a function that creates PHP variables $topsellers and $reorder. So I want to map my option popularity to $topsellers and the option Recently Ordered to $reorder

I have some JS that I was playing with but I don't know how to do this properly, however, it gives an idea:

<script type="text/javascript">
$('#filterText').on('change', function () {
if (this.value == '') {
  $(".groupcontainer").show();
} else {
  $(".groupcontainer").hide();
}
});
</script>

But basically, I want to say :

if value popularity is selected and $topsellers == true, show the groupcontainer div, and if value recently ordered is selected and $reorder is true, only show those groupcontainer divs.

I hope that makes sense. I feel like the pieces are there but I need help connecting them with logic and syntax.

UPDATE (new attempted solution):

JS:

<script type="text/javascript">

$('#filterText').on('change', function () {

var topsellers = "<?php echo $pgroups->topseller; ?>";
var reorder    = "<?php echo $pgroups->reorder; ?>";

 var currentVal = $(this).val();

 if (currentVal == 'popularity' && topsellers == "true" || currentVal == 'recently_ordered' && reorder == "true") {
   $(".groupcontainer").show();
 } else {
   $(".groupcontainer").hide();
 }
});
</script>

HTML/Select box:

    <div style="text-align:center;">
                                <div>
                                    <span style="color:#fff;"><strong>Sort by:</strong></span>
                                    <select id="filterText" class="uk-text-muted" style="margin-top:10px; width:33%; height:30px; font-size: 16px;" onchange="filterText()" >
                                        <option id="allitems" class="uk-text-muted" style="font-size: 16px;" selected data-default value="" selected data-default>All Items</option>
                                      <option id="popular" class="uk-text-muted" style="font-size: 16px;" value="popularity" >Popularity</option>
                                      <option id="recent" class="uk-text-muted" style="font-size: 16px;" value="recently_ordered">Recently Ordered </option>
                                    </select>
                                </div>
                            </div>

You would either need to write the HTML sections inside of a PHP conditional, or use JavaScript to call the PHP file with the selection information via AJAX. — Obsidian Age
– Obsidian Age, Commented Nov 14, 2017 at 20:43
Could you help me with that, possibly the PHP conditional? It's showing all products the way I want to now, but I would want to do something in my blade that would set the div as either having $topsellers/$reorder as true or false — Geoff_S
– Geoff_S, Commented Nov 14, 2017 at 20:47
The general way to go would be AJAX. Also, look into the jQuery.toggle() function. — Brandon Miller
– Brandon Miller, Commented Nov 14, 2017 at 20:50

Zakaria Acharki · Accepted Answer · 2017-11-14 21:57:52Z

2

You could add hidden inputs for those values like :

<input class="topsellers" value="{{$topsellers}}" />
<input class="reorder" value="{{$reorder}}" />

Or you could put the variables to the Js variables like :

var topsellers = "<?php echo $topsellers; ?>";
var reorder    = "<?php echo $reorder; ?>";

Then use those value in the condition in your JS code, something like :

$(function(){
    var topsellers = "<?php echo $topsellers; ?>";
    var reorder    = "<?php echo $reorder; ?>";

    $('#filterText').on('change', function() {
      var currentVal = $(this).val();

      if (currentVal == 'popularity' && topsellers == "1" || currentVal == 'recently_ordered' && reorder == "1") {
        $(".groupcontainer").show();
      } else {
        $(".groupcontainer").hide();
      }
    });
});

Hope this helps.

edited Nov 14, 2017 at 21:57

answered Nov 14, 2017 at 20:50

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

8 Comments

Geoff_S Over a year ago

This makes perfect since, but I'm getting no action from my select box. Do you mind to see my update to verify it loooks correct before I investigate further?

Zakaria Acharki Over a year ago

I think you should remove onchange="filterText()" first, then add a console.log(topsellers) just after the variables definition and let me know what's the output

Geoff_S Over a year ago

It looks like I'm getting a lot of referenceError: $ is not define

Zakaria Acharki Over a year ago

Make sure the jQuery is included and check my update using the ready function.

Geoff_S Over a year ago

Yes it is being included. I've tried with the update and it still doesn't have any action. I'm going to accept the answer though, and I may need to investigate the controller where the variables are created

|

Will H · Accepted Answer · 2017-11-14 20:50:35Z

2

Since PHP is a backend language you have to expose the variable in javascript context which is at the browser level. To do so what you would end up doing is something like this:

<script type="text/javascript">
var somePHPVariable = "<?php echo $SOMEVAR; ?>";
...
</script>

That now gives you the PHP variable at the javascript level so you can do operations on it just like you would with any other javascript variable. Just keep in mind that PHP renders / computes before javascript does, so your php variables will always be set first. The alternative to this would be to "ask php" via rest / ajax request what the value is and then continue calculation based on the result.

answered Nov 14, 2017 at 20:50

Will H

1,4681 gold badge14 silver badges22 bronze badges

Collectives™ on Stack Overflow

Hiding div with Javascript based on value of php variable

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related