Javascript - Conditionally add checkbox to php page if cookie exists

Question

I have some Javascript that adds some disclaimer text and a confirmation CheckBox, just before a submit button on a PHP/WordPress page. What I'd like to happen is the script checks for the existence of a cookie. If cookie doesn't exist (or has expired), then to add the disclaimer text, the checkbox and force the user to click the Checkbox before proceeding. But once done, a cookie is written so that the next time the script runs, if bypasses the disclaimer text, checkbox and just allows the user to hit 'submit'.

So, something like:

if cookie-exists {
    // straight to submit part of the code
} else {
    // show disclaimer and checkbox
    // Only allow user to hit submit if checkbox is ticked
    // Set the cookie with an expire of a day
}

I can see an answer on setting / reading a cookie here > How do I create and read a value from cookie?

But I'm just struggling to get it into the code snippet below.
Any pointers or help would be greatly appreciated. Thanks.

Code snippet follows:

function add_listing_select_cb()
{
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function ($){
            var checkbox_cont = '<br><input type="checkbox" name="I_Agree" id="I_Agree" value="I_Agree" /> <b>Disclaimer text here....</b>';
            jQuery(".property-search input[type='submit']").before(checkbox_cont);

            jQuery("#searchform").submit(function () {
                if (!jQuery("#I_Agree").is(":checked")) {
                    alert("Please first agree with the terms.");
                    return false;
                };
            });


            var $sel = $('#showresultsbasedonourratings'),
            $opts = $sel.children();
            $optsSorted = [];
            $optsSorted.push($opts.eq(0));
            for (var i = $opts.length - 1; i > 0; i--) {
                $optsSorted.push($opts.eq(i));
            };

            console.log($optsSorted);

            $sel.empty();
            $sel.append($optsSorted);

        });
    </script>
    <?php
}

Radu Bogdan · Accepted Answer · 2014-09-07 12:56:00Z

1

Have you tried something similar to this?

function add_listing_select_cb()
{
    ?>
    <script type="text/javascript">
       function getCookie(name) {
            var value = "; " + document.cookie;
            var parts = value.split("; " + name + "=");
            if (parts.length == 2) return parts.pop().split(";").shift();
        }

        jQuery(document).ready(function ($){
            if (getCookie("anything")!==true){
                var checkbox_cont = '<br><input type="checkbox" **required** name="I_Agree" id="I_Agree" value="I_Agree" /> <b>Disclaimer text here....</b>';
                jQuery(".property-search input[type='submit']").before(checkbox_cont);

                jQuery("#searchform").submit(function () {
                    if (!jQuery("#I_Agree").is(":checked")) {
                        alert("Please first agree with the terms.");
                        return false;
                    };
                });
            }

            var $sel = $('#showresultsbasedonourratings'),
            $opts = $sel.children();
            $optsSorted = [];
            $optsSorted.push($opts.eq(0));
            for (var i = $opts.length - 1; i > 0; i--) {
                $optsSorted.push($opts.eq(i));
            };

            console.log($optsSorted);

            $sel.empty();
            $sel.append($optsSorted);

        });
    </script>
    <?php
}

answered Sep 7, 2014 at 12:56

Radu Bogdan

5042 silver badges10 bronze badges

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

4 Comments

EyePeaSea Over a year ago

Hi @radu - thanks for the suggestion. That's what I'm looking for. I add in an 'else' after the alert to set the cookie with: document.cookie="anything" + "=" + "true" ; but it's not behaving quite as expected. I'll play around and with your suggestion and I'm sure I'll get there. Thanks. Ian

Radu Bogdan Over a year ago

maybe my getCookie doesn't work as expected try using the ones from w3s w3schools.com/js/js_cookies.asp , also another mistake i think i made is the check if getCookie("anything")!==true. Maybe it's set as string and not boolean so the check should be getCookie("cookie_name")!="true". @EyePeaSea Check out this link where they create and read a cookie w3schools.com/js/tryit.asp?filename=tryjs_cookie_username

EyePeaSea Over a year ago

Thanks @Radu - I'll check the w3 examples. I've been fooled by something that you and other Java experts will be familiar with - a mistake with the code doesn't always throw a visible error, it just drops out of that code segment. So, I'd input some test code that had a typo but because I hadn't seen any sort of error, I'd assumed it was ok. Very puzzling. A useful learning experience :-)

EyePeaSea Over a year ago

Ahhhhh. The cookie name is case sensitive! Other readers/newbies can read it here stackoverflow.com/questions/11311893/… - That's why it was behaving unpredictably. So - thanks again for the help, @Radu - your answer was a huge help.

Collectives™ on Stack Overflow

Javascript - Conditionally add checkbox to php page if cookie exists

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related