Solved

If Cookies and JavaScript are enabled, DO THIS

Posted on 2011-03-16
39
367 Views
Last Modified: 2012-05-11
Hi,

Attached is a cookie and JavaScript checker.

What I want to do is this:

If Cookies are enabled
echo cookies are enabled. (in green)
else echo cookies are not enabled (in red)
disable login button

If JavaScript are enabled
echo JavaScript are enabled. (in green)
else echo JavaScript is not enabled (in red)
disable login button

If Cookies and Javascript are BOTH enabled
echo JavaScript and Cookies are enabled (in green)
Enable Login Button



cookie-js-test.php
0
Comment
Question by:Computer Guy
  • 20
  • 18
39 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35146210
you can achieve this by first making the button in disabled state, and then enabling it with javascript if cookies are enabled

You can check if cookies are enabled using
http://techpatterns.com/downloads/javascript_check_cookies.php

and this is how you will make the button in disabled state
<input type="button" disabled>
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35146277
Can you please provide an example with my attached file?
0
 
LVL 4

Accepted Solution

by:
Finec earned 500 total points
ID: 35146338
Hi,

Start with a disabled submit button like this:

<input id="submitButton" type="submit" value="Submit" disabled="disabled" />

Open in new window


Create the red and green message boxes: (in the final version, use CSS)

<span style="color: green;" id="msgJavaScriptSuccess" style="display: none;">JavaScript is enabled</span>
<span style="color: red;" id="msgJavaScriptError">JavaScript is not enabled</span>
<span style="color: green;" id="msgCookieSuccess" style="display: none;">Cookies are enabled</span>
<span style="color: red;" id="msgCookieError" style="display: none;">Cookies are not enabled</span>

Open in new window


Start checking with JavaScript: (hide the default JavaScript error, and show the success message)

document.getElementById('msgJavaScriptError').style.display = 'none';
document.getElementById('msgJavaScriptSuccess').style.display = 'block';

Open in new window


Then check Cookies: (show error or success message (and enable submit button if needed)

Set_Cookie( 'test', 'none', '', '/', '', '' );
if ( Get_Cookie( 'test' ) )
{
  document.getElementById('msgCookieSuccess').style.display = 'block';
  document.getElementById('submitButton').disabled=false; // Enable login button
}
else
{
  // Cookie are not enabled
  document.getElementById('msgCookieError').style.display = 'block';
}

Open in new window

0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35146472
Hi,

This is what I have.

I got a PHP Parse error: syntax error, unexpected ')' on line 50.

Instead of pasting all of my code, this is line 50: Set_Cookie( 'test', 'none', '', '/', '', '' );

Is this format correct?
<script type="text/javascript">
                        document.getElementById('msgJavaScriptError').style.display = 'none';
                        document.getElementById('msgJavaScriptSuccess').style.display = 'block'; <br />


Set_Cookie( 'test', 'none', '', '/', '', '' );
if ( Get_Cookie( 'test' ) )

{
  document.getElementById('msgCookieSuccess').style.display = 'block';
  document.getElementById('submitButton').disabled=false; // Enable login button
}
else
{
  // Cookie are not enabled
  document.getElementById('msgCookieError').style.display = 'block';
}
</script>

Open in new window

0
 
LVL 4

Expert Comment

by:Finec
ID: 35146531
The <br /> can cause the parsing error (end of the line 3 in your code), but I can't see any PHP code here :)
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35146606
Hi,

Made a slight change SubmitButton is now login_button

For some reason when I use this code, it says JavaScript is disabled, when it is really enabled.

I'm using IE

Will this work with Firefox, Chrome and Safari
<script type="text/javascript">
                        document.getElementById('msgJavaScriptError').style.display = 'none';
                        document.getElementById('msgJavaScriptSuccess').style.display = 'block';


Set_Cookie( 'test', 'none', '', '/', '', '' );
if ( Get_Cookie( 'test' ) )

{
  document.getElementById('msgCookieSuccess').style.display = 'block';
  document.getElementById('login_button').disabled=false; // Enable login button
}
else
{
  // Cookie are not enabled
  document.getElementById('msgCookieError').style.display = 'block';
}
</script>

Open in new window

0
 
LVL 4

Expert Comment

by:Finec
ID: 35146801
Can you show me it online?
0
 
LVL 4

Expert Comment

by:Finec
ID: 35147510
Sorry, to use Set_Cookie and Get_Cookie you need this.
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35151432
Download the file (which has a txt extension) name it to: javascript_cookies_checker.js
and add this to my page?
<script type="text/javascript" src="js/javascript_cookies_checker.js"></script>
0
 
LVL 4

Expert Comment

by:Finec
ID: 35154842
Yes, or use it inline.
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35155158
Hi,

I did what you said.

Please see my code and results below.
<head>
<script type="text/javascript" src="js/javascript_cookies_checker.js"></script>
                        <script type="text/javascript">
                        document.getElementById('msgJavaScriptError').style.display = 'none';
                        document.getElementById('msgJavaScriptSuccess').style.display = 'block';


Set_Cookie( 'test', 'none', '', '/', '', '' );
if ( Get_Cookie( 'test' ) )

{
  document.getElementById('msgCookieSuccess').style.display = 'block';
  document.getElementById('login_button').disabled=false; // Enable login button
}
else
{
  // Cookie are not enabled
  document.getElementById('msgCookieError').style.display = 'block';
}
</script> 
</head>


<body>
<span style="color: green;" id="msgJavaScriptSuccess" style="display: none;">JavaScript is enabled</span>
<span style="color: red;" id="msgJavaScriptError">JavaScript is not enabled</span>
<span style="color: green;" id="msgCookieSuccess" style="display: none;">Cookies are enabled</span>
<span style="color: red;" id="msgCookieError" style="display: none;">Cookies are not enabled</span>
</body>

Open in new window

Firefox.png
IE7.png
0
 
LVL 4

Expert Comment

by:Finec
ID: 35156576
I used an other way to check cookies. Here's the fulll code with the button:

<html>
<head>
<style type="text/css">
    .msgSuccess
    {
        color: green;
        display: none;
    }
    .msgError
    {
        color: red;
        display: none;
    }
</style>
<script type="text/javascript">
<!--
    function check() {
        document.getElementById('msgJavaScriptError').style.display = 'none';
        document.getElementById('msgJavaScriptSuccess').style.display = 'block';


        if (navigator.cookieEnabled) {
            document.getElementById('msgCookieSuccess').style.display = 'block';
            document.getElementById('login_button').disabled = false; // Enable login button
        }
        else {
            // Cookie are not enabled
            document.getElementById('msgCookieError').style.display = 'block';
        }
    }

    window.onload = check;
-->
</script> 
</head>

<body>
    <span id="msgJavaScriptSuccess" class="msgSuccess">JavaScript is enabled</span>
    <span id="msgJavaScriptError" class="msgError" style="display: inline;">JavaScript is not enabled</span>
    <span id="msgCookieSuccess" class="msgSuccess">Cookies are enabled</span>
    <span id="msgCookieError" class="msgError">Cookies are not enabled</span>
    <input type="submit" id="login_button" disabled="disabled" />
</body>
</html>

Open in new window

0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35156745
Hi,

I followed the code, and got the same error

I included the file too.
0
 
LVL 4

Expert Comment

by:Finec
ID: 35156862
You don't need to include the file. I tested the code in IE, FF, Chrome, Opera and Safari, and there were no error.
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35157018
Hi,

I tried it in FireFox and IE, Still got "JavaScript not enabled", though it is.

I took out all of the code, and put in what you recently posted.
0
 
LVL 4

Expert Comment

by:Finec
ID: 35157079
Can you show it online?
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35157193
This is live, so I'd rather not give my URL on here. Email me audiotech520@comcast.net, and I'll give you the URL
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35158101
Hi,

I tried your suggestion and got a page with just the background.

Nothing in the error log.


<style type="text/css">
    .msgSuccess
    {
        color: green;
        display: none;
    }
    .msgError
    {
        color: red;
        display: none;
    }
</style>

<script type="text/javascript">
<!--
    function check() {
        document.getElementById('msgJavaScriptError').style.display = 'none';
        document.getElementById('msgJavaScriptSuccess').style.display = 'block';


        if (navigator.cookieEnabled) {
            document.getElementById('msgCookieSuccess').style.display = 'block';
            document.getElementById('login_button').disabled = false; // Enable login button
        }
        else {
            // Cookie are not enabled
            document.getElementById('msgCookieError').style.display = 'block';
        }
    }
window.onload = function () { check(); document.forms.login.amember_login.focus(); }
</script> 
</head>

<body>

Open in new window

0
 
LVL 4

Expert Comment

by:Finec
ID: 35158162
Sorry, but I don't understand what's the problem.
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 3

Author Comment

by:Computer Guy
ID: 35158199
Try the URL I sent via eMail.

The page loads, but only the background loads. No content, just background.
0
 
LVL 4

Expert Comment

by:Finec
ID: 35158332
Hmm, it's so strange. And with this:

<style type="text/css">
    .msgSuccess
    {
        color: green;
        display: none;
    }
    .msgError
    {
        color: red;
        display: none;
    }
</style>

<script type="text/javascript">
<!--
    function check() {
        document.getElementById('msgJavaScriptError').style.display = 'none';
        document.getElementById('msgJavaScriptSuccess').style.display = 'block';


        if (navigator.cookieEnabled) {
            document.getElementById('msgCookieSuccess').style.display = 'block';
            document.getElementById('login_button').disabled = false; // Enable login button
        }
        else {
            // Cookie are not enabled
            document.getElementById('msgCookieError').style.display = 'block';
        }
    }
</script> 
</head>

<body onload="check(); document.forms.login.amember_login.focus();">

Open in new window

0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35159152
It works FINE in Firefox, but not IE7.

 IE7 Demo
0
 
LVL 4

Assisted Solution

by:Finec
Finec earned 500 total points
ID: 35160562
Ohh, you missed the closing comment sign :)

<style type="text/css">
    .msgSuccess
    {
        color: green;
        display: none;
    }
    .msgError
    {
        color: red;
        display: none;
    }
</style>

<script type="text/javascript">
<!--
    function check() {
        document.getElementById('msgJavaScriptError').style.display = 'none';
        document.getElementById('msgJavaScriptSuccess').style.display = 'block';


        if (navigator.cookieEnabled) {
            document.getElementById('msgCookieSuccess').style.display = 'block';
            document.getElementById('login_button').disabled = false; // Enable login button
        }
        else {
            // Cookie are not enabled
            document.getElementById('msgCookieError').style.display = 'block';
        }
    }
window.onload = function () { check(); document.forms.login.amember_login.focus(); }
-->
</script> 
</head>

<body>

Open in new window

0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35160655
That did it!

One last thing, I notice that "JavaScript is not enabled" flashes when the page loads, and if it is enabled it does change.

Is there a way to make it not flash and just display the final result?
0
 
LVL 4

Assisted Solution

by:Finec
Finec earned 500 total points
ID: 35160759
We use javascript to validate, so we can't message, when it's not enabled. Try to hide it default, or use the code after the message spans instead of body's onload.

window.onload = function () { document.forms.login.amember_login.focus(); }

Open in new window


and

<span id="msgJavaScriptSuccess" class="msgSuccess">JavaScript is enabled</span>
<span id="msgJavaScriptError" class="msgError" style="display: inline;">JavaScript is not enabled</span>
<span id="msgCookieSuccess" class="msgSuccess">Cookies are enabled</span>
<span id="msgCookieError" class="msgError">Cookies are not enabled</span>

<script type="text/javascript">
<!-- 
    check();
-->
</script>

Open in new window

0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35189179
Just have one more question:

Using this code, how can I make it so:

If cookies and JS ARE enabled, this will display: Your brower has met the requirements to use our service.

If JS IS NOT enabled this will display: JavaScript is not enabled. Please enable it.

If cookies ARE NOT enabled  but JS is this will display: Cookies is not enabled. Please enable it.
0
 
LVL 4

Expert Comment

by:Finec
ID: 35189253
Change to this:

<span id="msgJavaScriptSuccess" class="msgSuccess">JavaScript is enabled</span>
<span id="msgJavaScriptError" class="msgError" style="display: inline;">JavaScript is not enabled. Please enable it.</span>
<span id="msgCookieSuccess" class="msgSuccess">Cookies are enabled</span>
<span id="msgCookieError" class="msgError">Cookies is not enabled. Please enable it.</span>
<span id="msgAllSuccess" class="msgSuccess">Your brower has met the requirements to use our service.</span>

Open in new window


And change check function to this:

function check() {
        document.getElementById('msgJavaScriptError').style.display = 'none';
        document.getElementById('msgJavaScriptSuccess').style.display = 'block';


        if (navigator.cookieEnabled) {
            document.getElementById('msgCookieSuccess').style.display = 'block';
            document.getElementById('msgAllSuccess').style.display = 'block';
            document.getElementById('login_button').disabled = false; // Enable login button
        }
        else {
            // Cookie are not enabled
            document.getElementById('msgCookieError').style.display = 'block';
        }
    }

Open in new window

0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35189368
But if cookies and JS is enabled, I just want to show: Your brower has met the requirements to use our service.

AND NOT JavaScript is Enabled AND Cookies Are Enabled AND Your brower has met the requirements to use our service.
0
 
LVL 4

Expert Comment

by:Finec
ID: 35189715
If you can do this check, your javascript is enabled, so it's enough to check only cookies.
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35189907
HI,

I did, but the issue is it states js is enabled.

I just want it so if BOTH JS and COOKIES  are enabled, it displays what is in the image:

I just want the msgAllSuccess to show if thats the case
dem.png
0
 
LVL 4

Expert Comment

by:Finec
ID: 35189927
Only the last message?
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35189962
JS is enabled with that image.

If I turn cookies off I get this:
dem2.png
0
 
LVL 4

Expert Comment

by:Finec
ID: 35190116
Yes, and you want to get only the last message, if you enable JS & Cookies?
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35190174
If cookies and JS are enabled, I only want this: Your brower has met the requirements to use our service.
0
 
LVL 4

Expert Comment

by:Finec
ID: 35190286
Ok, do this:

function check() {
        document.getElementById('msgJavaScriptError').style.display = 'none';
        document.getElementById('msgJavaScriptSuccess').style.display = 'block';


        if (navigator.cookieEnabled) {
            document.getElementById('msgJavaScriptSuccess').style.display = 'none';
            document.getElementById('msgCookieSuccess').style.display = 'none';
            document.getElementById('msgAllSuccess').style.display = 'block';
            document.getElementById('login_button').disabled = false; // Enable login button
        }
        else {
            // Cookie are not enabled
            document.getElementById('msgCookieError').style.display = 'block';
        }
    }

Open in new window

0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35190945
Hi,

I'm sorry to keep posting, but I keep having issuse. I appreciate you standing by this!

Using this code posted, when cookies and js  are enabled I get what is in the image.

This is what I want:

If JS and Cookies are enabled, display: msgAllSuccess
If JS is disabled, display: msgJavaScriptError
If Cookies are disabled, display: msgCookieError
<style type="text/css">
#msgJavaScriptError {
	background:url('images/TEST_IMAGES/check_error.png') no-repeat;
	padding-left:35px;
	width:200px;
}
#msgCookieSuccess {
	background:url('images/TEST_IMAGES/check_ok.png') no-repeat;
	padding-left:35px;
	width:200px;
}
#msgCookieError {
	background:url('images/TEST_IMAGES/check_error.png') no-repeat;
	padding-left:1px;
	width:200px;
	display:block;
}
#msgAllSuccess {
	background:url('images/TEST_IMAGES/check_ok.png') no-repeat;
	padding-left:35px;
	width:200px;
}

    .msgSuccess
    {
        color: green;
	    font-weight:bold;
        display: none;
    }
    .msgError
    {
        color: red;
		font-weight:bold;
		display: none;
		text-align:center;

    }
</style>

<script type="text/javascript">
<!--
function check() {
        document.getElementById('msgJavaScriptError').style.display = 'none';
        document.getElementById('msgJavaScriptSuccess').style.display = 'block';


        if (navigator.cookieEnabled) {
            document.getElementById('msgJavaScriptSuccess').style.display = 'none';
            document.getElementById('msgCookieSuccess').style.display = 'none';
            document.getElementById('msgAllSuccess').style.display = 'block';
            document.getElementById('login_button').disabled = false; // Enable login button
        }
        else {
            // Cookie are not enabled
            document.getElementById('msgCookieError').style.display = 'block';
        }
    }
	window.onload = function () { document.forms.login.amember_login.focus(); }

-->
</script>

<div id="msgJavaScriptSuccess" class="msgSuccess">JavaScript is enabled</div>
<div id="msgJavaScriptError" class="msgError" style="display: inline;">JavaScript is not enabled<br />CLICK HERE to learn how</div>
<div id="msgCookieSuccess" class="msgSuccess">Cookies are enabled</div>
<div id="msgCookieError" class="msgError">Cookies are not enabled<br />CLICK HERE to learn how</div>
<div id="msgAllSuccess" class="msgSuccess">Your brower has met the requirements<br />to use our service</div>
<script type="text/javascript">
<!-- 
    check();
-->
</script>

Open in new window

demo3.png
0
 
LVL 4

Expert Comment

by:Finec
ID: 35191173
<script type="text/javascript">
<!--

var jsEnabled = false;
var cookiesEnabled = false;

function check() 
{
  jsEnabled = true;
  if (navigator.cookieEnabled) cookiesEnabled = true;

  if (jsEnabled)
  {
    document.getElementById('msgJavaScriptError').style.display = 'none';
    document.getElementById('msgJavaScriptSuccess').style.display = 'block';

    if (cookiesEnabled)
    {
      // "If JS and Cookies are enabled, display: msgAllSuccess"
      document.getElementById('msgJavaScriptSuccess').style.display = 'none';
      document.getElementById('msgCookieSuccess').style.display = 'none';
      document.getElementById('msgAllSuccess').style.display = 'block';
      document.getElementById('login_button').disabled = false; // Enable login button
    }
    else
    {
       // "If Cookies are disabled, display: msgCookieError"
       document.getElementById('msgCookieError').style.display = 'block';
    }
  }
}

window.onload = function () { document.forms.login.amember_login.focus(); }
-->
</script>

Open in new window

0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35196273
Hi,

Still having some issues, please see the attached images for the results with the current code.

This is exactly what I am looking to do, just like this:
If JS and Cookies ARE enabled:
Display: Your broswer has met the requirements to use our service
Enable Login Button

If JS IS NOT enabled:
Display: JavaScript is not enabled CLICK HERE to learn how
Disable Login Button

If JS IS enabled and Cookies ARE NOT:
Display: Cookies are not enabled CLICK HERE to learn how
Disable Login Button


JS-and-Cookies-Enabled.png
JS-NOT-enabled-but-Cookies-ARE.png
Cookies-NOT-Enabled-but-JS-IS.png
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35222014
Anything on my last comment?
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now