cookie and modal error with order of header being sent

Question

I use JavaScript to make a popup window (modal) that warns people we use cookies on our website. There is a accept button which on click should create a cookie that last 60 days and prevent the modal from displaying, but when I click the button I get a error saying I can't modify header because its already sent.

The modal JavaScript was taken from w3schools and works, but my browser gets an error "cannot set property 'onclick' of null".

here's the code:

<?php
  $cookie_name = "V3-cookies";

  if(!isset($_COOKIE[$cookie_name])) {
    include $_SERVER["DOCUMENT_ROOT"] . "/etc/cookie.php";
  } else {}
?>

this is the /etc/cookie.php:

  <form id="modal" method="post" action="">
        <div class="modalconent tabs">
            <fieldset>
            <span class="close">×</span>
              <h2 class="fs-title">Cookies</h2>
              <h3 class="fs-subtitle">We use cookies to improve your experience</h3>
                 <iframe style="width:100%; height:80px;" src="/etc/txt/cookies.php" ></iframe><br />
               <input type="submit" name="cookie" value="Accept" class="btn fr" style="width:20%;" />
            </fieldset>
        </div>
    </form>
    <?php
      if(isset($_POST['cookie'])){
        $cookie_name = "V3-cookies";
        $cookie_value = "V3-cookies";
        setcookie($cookie_name, $cookie_value, time() + (86400 * 60)); // 86400 = 1 day
      }else{}
    ?>
    
    
    <script>
    window.onload = function () {
        document.getElementById('button').onclick = function () {
            document.getElementById('modal').style.display = "none"
        };
    };
    
    
    
    
    
    // Get the modal
    var modal = document.getElementById('modal');
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }
    
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
    </script>

the JavaScript error where property 'onlick' is null is here (second line)

   window.onload = function () {
        document.getElementById('button').onclick = function () {
            document.getElementById('modal').style.display = "none"
        };
    };

the header php error I have no clue what goes wrong.

So all in all 2 questions.

How can I fix the php to set the cookie on button click?
How can I remove the browser error where onclick is null? (2. is not really that important, just that I hate having errors)

You need to reorganise your PHP code so it sends HTTP headers before the page and not in the middle of your HTML. This has nothing to do with JavaScript. — Álvaro González, Sep 26 '16 at 07:59
Umm, do you even have a clickable element with the id #button? — ravb79, Sep 26 '16 at 07:59
@ravb79 No. the javascript was taken from w3, and i said it works. But i get an error, the real problem is the PHP, where im not able to set the cookie when the accept button is pressed. — Volcan 3, Sep 26 '16 at 08:02
You could use a) JS cookies, b) AJAX to set cookies via another PHP script or c) reload the page after the button click. — ravb79, Sep 26 '16 at 08:05
Possible duplicate of [How to fix "Headers already sent" error in PHP](http://stackoverflow.com/questions/8028957/how-to-fix-headers-already-sent-error-in-php) — CBroe, Sep 26 '16 at 10:01

score 0 · Accepted Answer · answered Sep 26 '16 at 08:40

I have solved the problem by adding another page where i set the cookie. so the <form> from cookie.php will be <form actio="/etc/set_cookie.php" method="post"> and in set_cookie.php I use the same php script as before.

I posted this answer to let people know in the future.

cookie and modal error with order of header being sent

1 Answers1