PHP displaying different information on the same page using buttons? [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 8 years ago.

Improve this question

Trying to list a video series on my PHP website, although I have 3 series for it, instead of creating 3 different web pages is there a way I could include 3 buttons at the bottom of 1 page for example:

(SERIES 1) (SERIES 2) (SERIES 3)

Series 1 would already be listed below, but when the user clicks series 2 or series 3, instead of changing the web page, it would list the chosen series below instead of series 1?

I was thinking this might have something to do with the "INCLUDE:" code? But pretty new to this stuff? Thanks!

P.S: Trying to keep it simple, the easier, the better.

Answer 1

You could pass the data into the URL using links, and then capture the choice in the $_GET array. Obviously thispage.php needs to be changed, and some html could be changed if you literally want buttons. But here's the idea:

echo '
    <a href="thispage.php?series=1">SERIES 1</a>
    <a href="thispage.php?series=2">SERIES 2</a>
    <a href="thispage.php?series=3">SERIES 3</a>
';

if (isset($_GET['series'])) {
    $series = $_GET['series'];
} else {//if there is no choice, display series 1
    $series = 1; 
}

switch($series) {
    case 1:
        //display series 1
        //e.g. echo...
    break;

    case 2:
        //display series 1
    break;

    case 3:
        //display series 1
    break;

    default:
    break;
}

Answer 2

The easiest way, would be to render all of your videos within "x" divs; each having a unique ID. Then using javascript show/hide whichever series was clicked. Something along these lines:

<button id="one" class="videoSeries" value="ViewSeries One" />
<button id="two" class="videoSeries" value="View Series Two" />


<div class="videoContainer" id="videoSeriesOne">
    <ul>
    <?php
        $videos = get_videos(seriesOne); // Get all videos for a given series.
        for($i=0; i<$videos.length; i++;) { // Loop through videos & create the links
            echo'<li><a href="'.$video[i]['video_href'}.'">'.$video[i]['video_title'].'<a></li>';
        }
    ?>
    </ul>
</div>

<div class="videoContainer" id="videoSeriesTwo">
    <ul>
    <?php
        $videos = get_videos(seriesOne); // Get all videos for a given series.
        for($i=0; i<$videos.length; i++;) { // Loop through videos & create the links
            echo'<li><a href="'.$video[i]['video_href'}.'">'.$video[i]['video_title'].'<a></li>';
        }
    ?>
    </ul>
</div>

... and so on

Your javascript would look something like this (using jQuery):

$('.videoSeries').on('click', function(event) {
    var seriesToShow = $(this).attr('id').val();
    $('.videoContainer').hide();
    switch(seriesToShow) {
     case 'one':
     $('#videoSeriesOne').show();
     break;
    } 
}

This is by far not the most efficient way of doing this, but it's pretty simple & straight forward. You may need to tweak the methods a little, but this should get you going.