text inside noscript tags is being outputted as text and not form

Question

As soon as I open my webpage without JavaScript my form in <noscript> tags is displayed as code but after I refresh it once it seems to be fine. Is there a way that I can display the form properly right after I disable JavaScript or is there a way I can reload the page once right after it loads when JavaScript is not enabled?

I've tried using meta refresh but I can't figure out a way to reload just once without the use of JavaScript.

here is the code:

<div id="JS" class="span4" style="display: none">
<h2 class="side">contact</h2>
<h3 class="side">message</h3>
<br><br>

                <form id="animate" >
                    <input id="name" name="Name" type="text" value="" placeholder="Your Name" maxlength="25" >
                    <input id="email" name="Email" type="text" value="" placeholder="Your E-mail" maxlength="100">
                    <textarea id="Message" name="Message" placeholder="Your Message" spellcheck="true" rows="6"></textarea>
                    <input id="spam" type="text" name="spam" style="display: none;" value=""/>
                    <input id="submit" type="submit" name="submit" value="Submit"/>
                </form>
                <div style="color: black; font-family: urwgroteskregular;" id="thanks">
                    <h2> Thank you, your message has been received.</h2>
                </div>
            </div>
            <div class="span4" id="noScript">
                <noscript>
                    <h2 class="side">contact</h2>
                    <h3 class="side">message</h3>
                    <br><br>
                    <form action='process.php' method="post" >
                        <input name="Name" type="text" value="" placeholder="Your Name" required="" maxlength="25">
                        <input  name="Email" type="text" value="" placeholder="Your E-mail" required="" maxlength="100">
                        <textarea  name="Message" placeholder="Your Message" spellcheck="true" rows="6" required=""></textarea>
                        <input  type="text" name="spam" style="display: none;" value=""/>
                        <input type="submit" name="submit" value="Submit"/>
                    </form>
                </noscript>

            <script type="text/javascript">

                document.getElementById('JS').style.display = 'block';
                document.getElementById('noScript').style.display = 'none';

            </script>

Answer 1

I don't know what's causing the <noscript> problem, but I do know you're on the wrong track with that approach.

Look at the two versions of the input form—they are identical except for these differences:

• The scripted version adds id attributes on the <form> and its elements.
• The <noscript> version adds action and method attributes to the <form>, and required attributes to several elements.

What you should do is have a single instance of this form and use it for both purposes. Add in all of the attributes from both versions of the form. The id attributes won't hurt anything in the no-JS case, and the action/method and required attributes won't hurt anything when you're handling the submission with JavaScript. (Just suppress the normal form submit with a .preventDefault() call as usual.)

So the form ends up like this:

<form id="animate" action="process.php" method="post" >
    <input id="name" name="Name" type="text" value=""
        placeholder="Your Name" required="" maxlength="25">
    <input id="email" name="Email" type="text" value=""
        placeholder="Your E-mail" required="" maxlength="100">
    <textarea id="Message" name="Message" placeholder="Your Message"
        spellcheck="true" rows="6" required="">
    </textarea>
    <input id="spam" type="text" name="spam"
        style="display: none;" value="">
    <input id="submit" type="submit" name="submit" value="Submit">
</form>

Your page also has <h2> and <h3> tags in the <noscript> section and the "Thank you" <div> in the script version, but you can hide and show those as needed using techniques like the ones suggested in the other answers.

Answer 2

Why not hide the non-js form using js

<html>
<head>
<script>
document.write('<style>.nonjs { display:none}</style>');
<script>

Answer 3

Most people deal with this problem by putting the class no-js on their HTML, and including the Modernizr library, which removes it and replaces it with js — this way you can include the following CSS:

html.js #noScript {
  display: none;
}

…and scripted browsers won't display the second form.

If you don't want to include all of Modernizr, simply make sure your HTML had the class:

<html class="no-js">

Then include the following code in the <head>:

void function addScript(){
  var html = document.lastChild;
  html.className = html.className.replace('no-js','js');
}();

Scripted browsers will read and execute this script, which replaces the class. Now you can taylor your CSS to target only scripted browsers:

html.js #noScript {
  display: none;
}

Sorted! No need to make the page render the form, then remove it afterwards with JS. No need to nest it in <noscript>. Simply display it or not depending on script presence. The beauty with this technique is you can extend it: a classes js-only or no-js-only can be added to elements to specify which situation they should be shown in, etc.

Answer 4

I have found this tend to happen when you have mal-formed html within the noscript tags, for instance mixing html with xhtml (bad habbit) for example with a html page with a doc type of html:

<noscript>
  <img src="image.jpg" />
</noscript>

instead of:

<noscript>
  <img src="image.jpg" >
</noscript>

seems to cause this, however this doesn't seem to cause issues outside of the no script tags, in at least all the main browsers anyway.

as for the above answers of using something other then a noscript tag. forget modenizer ridiculously large amount of code to do something simple!

you could use a div with a class="noscript" have everything else hidden by default then use script to hide the noscript div and display other js-enabled content.
this has the advantage of also working should a js-enabled browser can't download your script, which can happen for a variety of reasons. disadvantage of that approach is any external content within the like an img tag will still be download by the browser pre-loader even if the browser has js enabled, so that's where a noscript tag can be better. best approach of course depends on what you are doing