• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 379
  • Last Modified:

If Cookies and JavaScript are enabled, DO THIS

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
Computer Guy
Asked:
Computer Guy
  • 20
  • 18
3 Solutions
 
Gurvinder Pal SinghCommented:
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
 
Computer GuyAuthor Commented:
Can you please provide an example with my attached file?
0
 
FinecCommented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
Computer GuyAuthor Commented:
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
 
FinecCommented:
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
 
Computer GuyAuthor Commented:
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
 
FinecCommented:
Can you show me it online?
0
 
FinecCommented:
Sorry, to use Set_Cookie and Get_Cookie you need this.
0
 
Computer GuyAuthor Commented:
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
 
FinecCommented:
Yes, or use it inline.
0
 
Computer GuyAuthor Commented:
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
 
FinecCommented:
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
 
Computer GuyAuthor Commented:
Hi,

I followed the code, and got the same error

I included the file too.
0
 
FinecCommented:
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
 
Computer GuyAuthor Commented:
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
 
FinecCommented:
Can you show it online?
0
 
Computer GuyAuthor Commented:
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
 
Computer GuyAuthor Commented:
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
 
FinecCommented:
Sorry, but I don't understand what's the problem.
0
 
Computer GuyAuthor Commented:
Try the URL I sent via eMail.

The page loads, but only the background loads. No content, just background.
0
 
FinecCommented:
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
 
Computer GuyAuthor Commented:
It works FINE in Firefox, but not IE7.

 IE7 Demo
0
 
FinecCommented:
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
 
Computer GuyAuthor Commented:
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
 
FinecCommented:
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
 
Computer GuyAuthor Commented:
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
 
FinecCommented:
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
 
Computer GuyAuthor Commented:
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
 
FinecCommented:
If you can do this check, your javascript is enabled, so it's enough to check only cookies.
0
 
Computer GuyAuthor Commented:
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
 
FinecCommented:
Only the last message?
0
 
Computer GuyAuthor Commented:
JS is enabled with that image.

If I turn cookies off I get this:
dem2.png
0
 
FinecCommented:
Yes, and you want to get only the last message, if you enable JS & Cookies?
0
 
Computer GuyAuthor Commented:
If cookies and JS are enabled, I only want this: Your brower has met the requirements to use our service.
0
 
FinecCommented:
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
 
Computer GuyAuthor Commented:
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
 
FinecCommented:
<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
 
Computer GuyAuthor Commented:
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
 
Computer GuyAuthor Commented:
Anything on my last comment?
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 20
  • 18
Tackle projects and never again get stuck behind a technical roadblock.
Join Now