get value for a cookie from a bootrap modal with js

Question

I'm trying to create a modal that has 2 options: yes or no. When a user selects no I will create a condition if value=no then do not display modal.

The issue is that I cannot accomplish it. If is answer is yes I can manipulate the info, I need to display a modal asking a question, get the users answer and based on this and do something every 15 days.

my code is currently not working properly

<script>
    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    function getCookie(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }

    function checkCookie() {

        $('#hewant').on('click', function() {
            var valyes = $(this).text();
            console.log(valyes);
        });

        $('#hedont').on('click', function() {
            var valno = $(this).text();
            console.log(valno);
        });
        var user = getCookie("username");

        if (user != "") {
            alert("Welcome again " + user);
        } else {
            $("#myModalcashout").modal();
            user = "testing me";
            if (user != "" && user != null) {
                setCookie("username", user, 15);
            }
        }
    }
</script>

<body onload="checkCookie()">

    <div class="modal fade" id="myModalcashout">
        <div class="modal-dialog">
            <!-- for modal to active manually->
         <!-- Modal content-->
            <div class="modal-content">

                <div class="modal-body">

                    <p style="text-align:center">test</p>
                    <p style="text-align:center">question</p>
                    <p style="text-align:center">for u</p>
                    <div id="hewant" value="yes"> yes i am </div>
                    <div id="hedont" value="no"> no i dont</div>
                </div>

            </div>

        </div>
    </div>
</body>

Answer 1

I restructured your code for you. For starters you only need 1 listener for both buttons, which can be assigned using class on the buttons in the modal (which I changed from div to button tags.

Note : "Run this code snippet" will not work in this sand boxed environment in regards to cookie manipulation so you will have to test this yourself.

There is now a showModal() function that you will call on load that is responsible for showing your modal and attaching a click listener to both buttons on the modal.

When the user clicks yes or no on the modal we get their answer and pass it to checkCookie() function which does as you ask.

I replaced your create and set cookie functions with ones that are tested and work (also added eraseCookie()) there is a great explanation about all 3 functions Here

 showModal(); function showModal() { // only show modal if cookie for the user is null var user = readCookie("username"); if (user != null) { alert("Welcome again " + user); } else { user = "testing me"; $("#myModalcashout").modal(); // add listener on buttons $('.modalButton').on('click', function() { $('#myModalcashout').modal().hide(); var answer = $(this).val(); console.log(answer); // create a cookie with the users answer to the modal createCookie("username", answer, 15); }); } } function createCookie(name, value, days) { if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); var expires = "; expires=" + date.toGMTString(); } else var expires = ""; document.cookie = name + "=" + value + expires + "; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; } function eraseCookie(name) { createCookie(name, "", -1); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <div class="modal fade" id="myModalcashout"> <div class="modal-dialog"> <!-- for modal to active manually-> <!-- Modal content--> <div class="modal-content"> <div class="modal-body"> <p style="text-align:center">test</p> <p style="text-align:center">question</p> <p style="text-align:center">for u</p> <button class="modalButton" value="yes"> yes i am </button> <button class="modalButton" value="no"> no i dont</button> </div> </div> </div> </div>

get value for a cookie from a bootrap modal with js

Question

1 answers

solution1
1 ACCPTED 2018-01-23 19:44:41

get value for a cookie from a bootrap modal with js

Question

1 answers

solution1 1 ACCPTED 2018-01-23 19:44:41

solution1
1 ACCPTED 2018-01-23 19:44:41