How to add formatting to my pagination

Question

I am using the following code to create a form, that is paginated using java script (that someone on this forum supplied for me, I do not have a lot of experience with Java Script), my understanding is that the JavaScript simply hides\\unhides tagged sections of the form.

At the moment, my buttons for the paginated form all look identical, I would like to add some CSS style formatting to highlight the chosen form 'page' number, but my experiments have been unsuccessful so far. Here is my code:

<?php

        $PageID = 0;
echo ('<script src="https://code.jquery.com/jquery-1.11.2.js"></script>');    
echo ("\n");
        echo ('<form>');

        foreach ($ListSections as $sections)
        {
            if ($PageID == 0)
            {
                echo ('<div id="Page' . $PageID . '" class="informbdy2">');echo ("\n");
            }
            else
            {
                echo ('<div id="Page' . $PageID . '" class="informbdy2" style="display:none">');echo ("\n");
            }
            echo ("<br>");
            $PageNum = $PageID +1;
            echo ('<p style="cursor:pointer; color:black; background-color: #DBB7BA; border-radius: 8px;    border-color: #860A18; padding-left: 6px; padding-right: 6px; "> Section ' . $PageNum . ': ');
            echo ($sections[1] . "<br>");

            $QuestionNum = 0;
            foreach ($ListQs as $value)
            {
                if ($value[1] == $sections[1])
                {
                    echo ('<div ');
                    echo ('id="questionsform"');
                    echo ('name="questionsform"');
                    echo ('method="post" ');
                    echo ('action="admin_questions.php"');
                    echo ('>');

                    echo ("<input type='hidden' name='MyID' value='" . $value[0] . "'); />");

                    echo ("<table>");
                    echo ("<tr>");  
                    echo ("<td>");  
                    echo ("<label for='Question' class='logintext'>Question:</label>");
                    echo ("</td>");
                    echo ("<td>");
                    echo ('<textarea name="Question" rows="2" cols="25">');
                    echo ("$value[3]");
                    echo ('</textarea>');
                    echo ("</td>");
                    echo ("<td>");
                    echo ("</td>");
                    echo ("</tr>");

                    echo ("<tr>");  
                    echo ("<td>");  
                    echo ("<label for='Answer1' class='logintext'>Answer 1:</label>");
                    echo ("</td>");
                    echo ("<td>");
                    echo ('<textarea name="Answer1" rows="1" cols="25">');
                    echo ("$value[4]");
                    echo ('</textarea>');
                    echo ("</td>");
                    echo ("<td>");
                    echo ("<input type='radio' name='" . $QuestionNum . "ans1' value='1' >1");
                    echo ("</td>");
                    echo ("</tr>");

                    echo ("<tr>");  
                    echo ("<td>");  
                    echo ("<label for='Answer2' class='logintext'>Answer 2:</label>");
                    echo ("</td>");
                    echo ("<td>");
                    echo ('<textarea name="Answer2" rows="1" cols="25">');
                    echo ("$value[5]");
                    echo ('</textarea>');
                    echo ("</td>");
                    echo ("<td>");
                    echo ("<input type='radio' name='" . $QuestionNum . "ans2' value='2' >2");
                    echo ("</td>");
                    echo ("</tr>");

                    echo ("<tr>");  
                    echo ("<td>");  
                    echo ("<label for='Answer3' class='logintext'>Answer 3:</label>");
                    echo ("</td>");
                    echo ("<td>");
                    echo ('<textarea name="Answer3" rows="1" cols="25">');
                    echo ("$value[6]");
                    echo ('</textarea>');
                    echo ("</td>");
                    echo ("<td>");
                    echo ("<input type='radio' name='" . $QuestionNum . "ans3' value='3' >3");
                    echo ("</td>");
                    echo ("</tr>");


                    echo ("</td>");
                    echo ("</tr>");



                    echo ("</table>");
                    echo ('</div>');
                    echo ('</br>');
                    echo ('</br>');
                }               
            }
            $PageID++;
            echo ('</div>');
        }
        echo ('</div>');
        echo ('</form>' ."\n");



?>          
<?php       
        // Create Page Menu's for the form
        $PageID = 0;
        echo ('<div id="page_menus">' ."\n");
        echo ("</br>CLICK TO SELECT PAGE >> ");
        foreach ($ListSections as $PageMenu)

        {
            $mystring = '<a id="get_';
            //echo ($mystring);
            $mystring = $mystring . $PageID;
            //echo ($mystring);


            $mystring = $mystring . '"  style="cursor:pointer; color:black; background-color: #DBB7BA; border-radius: 8px;  border-color: #860A18; padding-left: 6px; padding-right: 6px; ">';

            //echo ($mystring);
            ++$PageID;
            $mystring = $mystring .  $PageID . '</a>' ."\n";
            echo ($mystring);
        }
        echo ('</div>' . "\n" . '</br>'."\n");              

        //Script to show and hide each 'Page' of the form
        echo ("\n");
        $PageID = 0;
        ?>
<script>
        <?php
        foreach ($ListSections as $ShowHide)
        {
            $MyPage = "Page" . $PageID;
            $MyGet = "get_" . $PageID;

            ?>
var my_get = <?php echo json_encode("#" . $MyGet); echo ("\n");
?>;

                $(my_get).click(function(){


                    <?php   $OtherPage = 0;
                            foreach ($ListSections as $Midsections)
                            {
                                $ThisPage = "Page" . $OtherPage;

                                if ($Midsections[1] <> $ShowHide[1])
                                {

                    ?>
var noshow_page = <?php echo json_encode("#" . $ThisPage);
?>;

$(noshow_page).hide()
                    <?php

                                }
                                else
                                {
?>

var noshow_page = <?php echo json_encode("#" . $ThisPage);?>;
$(noshow_page).show()
                    <?php
                                }
                                $OtherPage++;
                            }
                    ?>;
                })


            <?php
            $PageID++;
        }


        ?>
        </script>

How would I add CSS type formatting to the page menu items (under the section commented "// Create Page Menu's for the form") to show that a certain 'page' of the form is selected? The problem is that the web-page is not re-loaded, so I cannot simply track the button presses and re-format using 'if' style logic and CSS.

Thank you,

Lee

Answer 1

You would need to add some JS to handle the click and then you can style using CSS.

HTML:

<div id="page_menus">

    <a id="get_01">1</a>
    <a id="get_02">2</a>
    <a id="get_03">3</a>
    <a id="get_04">4</a>
    <a id="get_05">5</a>

</div>

JS:

jQuery('#page_menus a').on('click', function() {

    if ($('a').hasClass('current')) {
        $('a').removeClass('current');
    }
    $(this).addClass('current');

});

CSS:

#page_menus a {
    cursor:pointer; 
    color:black; 
    background-color: #DBB7BA; 
    border-radius: 8px;  
    border-color: #860A18; 
    padding-left: 6px; 
    padding-right: 6px; 
}

#page_menus a.current {
    background-color: #ccc;
}

Here is a working fiddle .