How Can I Hide A Button If JavaScript Is Disabled?

I have a website that allows users to create new content and I use javascript as a way to check for spam. If user has javascript turned off how can I hide or disable the post searc

Solution 1:

You could just use a noscript tag, in your head that is only loaded when javascript is disabled.

HTML

<noscript>
    <style type="text/css">
         #creatingpost {
           display: none; 
         }

         #noJsBanner
         {
            display: block;
         }
    </style>
</noscript>

Check this demo with JavaScript disabled.

Solution 2:

Why not show the "no JS" version by default and toggle it with JavaScript (that will obviously only run if JS is enabled)?

HTML:

<div class="js-show">
    <input type="Submit" value="Go!" />
</div>
<div class="js-hide">
    <p>Please switch JavaScript on.</p>
</div>

CSS:

.js-show
{
    display: "none";
}

JavaScript (jQuery):

$(function() {
    $('.js-hide').hide();
    $('.js-show').show();
});

Fiddle.

Alternatively, you could place a "no-js" class on the html element and swap it for "js" on document.ready, then style things with these classes accordingly.

Either of these approaches gives you a flexible way of creating JS-free alternatives for features across your entire site with only a couple of lines of code.