Displaying a form only if Javascript is enabled

Question

I have a form which uses JS to do some things when the user clicks the submit button. I want to disable the form and hide it if the user does not have JS enabled. I thought I could do it like so:

<form style="display:none;" onLoad="this.style.display='inline'">
    Text
    <input type="text">
</form>
<noscript>Noscript stuff here</noscript>

However, it doesn't work. Since I don't really use JS, I'm probably just making an embarrassingly obvious mistake, and I'm going to take a guess and say that it has something to do with the "this" part.

A form doesn't have an "onload" event, which is why the posted code won't work. — user2864740, Mar 01 '14 at 00:04
possible duplicate of [How can I write HTML code only if JS is enabled?](http://stackoverflow.com/questions/5181346/how-can-i-write-html-code-only-if-js-is-enabled) which is actualy a duplicate of http://stackoverflow.com/questions/30319/is-there-a-html-opposite-to-noscript — Dryden Long, Mar 01 '14 at 00:07

score 4 · Accepted Answer · answered Mar 01 '14 at 00:04

4

Try an invisible div that gets shown via JavaScript when the page loads:

<div id="hideThisFromNonJs" style="display:none">
    <form>
       Text
       <input type="text">
    </form>
</div>

<script type="text/javascript">
     document.getElementById('hideThisFromNonJs').style.display='block';
</script>

answered Mar 01 '14 at 00:04

chridam

100,957
23
236
235

1

Looks like we referenced the same answer: http://stackoverflow.com/questions/5181346/how-can-i-write-html-code-only-if-js-is-enabled haha – Dryden Long Mar 01 '14 at 00:05
1

Hahahaha what are the odds! :) – chridam Mar 01 '14 at 00:06
haha pretty good considering it's the top Google result! – Dryden Long Mar 01 '14 at 00:07

Dryden Long · Answer 2 · 2014-03-01T00:06:08.957

4

What you can do is have the form hidden by default, and then use javascript to unhide it. Something like this should work:

<form id="jsform" style="display:none;">
    Text
    <input type="text">
</form>

<script type="text/javascript">
    document.getElementById('jsform').style.display='block';
</script>

edited Mar 01 '14 at 00:06

answered Mar 01 '14 at 00:05

Dryden Long

10,072
2
35
47

@user2864740 Thanks, I forgot to edit OP's markup – Dryden Long Mar 01 '14 at 00:06
1

Cheers. I'd accept the answer, but for some reason it's telling me I have to wait 7 minutes. Guess I'll come back then. – Hiigaran Mar 01 '14 at 00:09
1

@Hiigaran yeah, they make you wait a little bit to make sure enough good answers roll in... You should accept chridam's answer though, he has the same thing as me, but answered first... – Dryden Long Mar 01 '14 at 00:10
Sure thing. They're currently both showing the same minutes ago, so I had to pick one at random. – Hiigaran Mar 01 '14 at 00:12

Displaying a form only if Javascript is enabled

2 Answers2