Hide element only if javascript is enabled

Question

I have a view that displays a textbox as follows:

@Html.TextBoxFor(m => m.CodeGuest, new {style = "display: none"})

it is displayed via javascript (so the user clicks a checkbox).

If javascript is not enabled, I must remove this line (style = "display: none") so that the textbox is displayed by default.

Answer 1

I typed this as a comment because it seemed so obvious I figured somebody else could grab some upvotes, but:

<noscript>
  <div>
    Hello YOU HAVE JAVASCRIPT TURNED OFF YOU BIG SILLY
  </div>
</noscript>

The content of a <noscript> tag is shown only when JavaScript is disabled.

Answer 2

You can use client side logic for this, have it visible as default and hide it with javascript on page load.

If you use jQuery it will be something like this:

$(function() {
    $('[name="CodeGuest"]').hide();
});

And remove the display: none from the Razor logic.

Another solution is to wrap the textbox element in <noscript>-tags.

For example:

<noscript>
     @Html.TextBoxFor(m => m.CodeGuest)
</noscript>