How to disable HTML/JavaScript form if JavaScript is disabled in browser

Question

First off the bat I am new to this an really trying my best to understand how this works. I have the following simple login form that leads to a homepage if the right login credentials are submitted. However when run in Firefox with JavaScript disabled the login credentials are ignored and my homepage is displayed anyway no matter what login details I provide. I have created a message in between <noscript></noscript> which fires when JavaScript is disabled. What I would like to achieve is that the warning message displays only and that the form etc. is disabled and not displayed until the login page is reloaded with JavaScript enabled. Can someone please help me with this? It is much appreciated!! My code is

<!doctype html>
<!-- This is is the main start page saved in index.html -->
<html lang="en-US">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h2>Login details</h2>

<noscript>
        <h3>Before you login</h3>
        <p>JavaScript needs to run for this site to work properly.<br />
        Please activate JavaScript in your browser<br />
        and reload this page to login.
        </p>
</noscript>

<form id="myForm" name="login" onsubmit="return validateFormOnSubmit()" action="http://localhost:8080/index.html" method="post">
<fieldset>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="Submit">
 </fieldset>
</form>
</body>
</html>

<script>
        function validateFormOnSubmit() {
        var un = document.login.username.value;
        var pw = document.login.password.value;
        var username = "username"
        var password = "password"
        if ((un == username) && (pw == password)) {
                return true;
        }
        else {
                alert ("Login was unsuccessful, please check your username and password");
                return false;
        }
}
</script>

Disable your fieldset (ie <fieldset disabled>) and enable it with JS (ie document.querySelector('fieldset[disabled]').disabled = false). In addition to this, use server-side validation which you should be doing anyway as anyone can read your JS source code — Phil
– Phil, Commented Mar 31, 2020 at 5:27
You shouldn't put your username and password on the source code, anyone can see it by looking at the page source (Ctrl+U or right click - view source) — ariel
– ariel, Commented Mar 31, 2020 at 5:29
not sure where document.querySelector('fieldset[disabled]').disabled = false) should go Phil. — speed bump
– speed bump, Commented Mar 31, 2020 at 5:34
If you just need a secret page, a way of doing this is making the page name part of the password. For instance, let password be "secret", and then instead of redirecting to "index.html", let it be "secret.html", or something less predictable than that. Then use document.location = password + ".html" — ariel
– ariel, Commented Mar 31, 2020 at 5:35

Zauberbutter · Accepted Answer · 2020-03-31 07:15:10Z

1

You can achieve this without adding extra JavaScript. You can use a <noscript> tag also in the <head>, so you are able to hide this with CSS:

…
<head>
   …
   <noscript>
       <style>
           #myForm { 
              display: none 
           }
       </style>
   </noscript>
</head>
…

answered Mar 31, 2020 at 7:15

Zauberbutter

1,02211 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

speed bump Over a year ago

Hey thanks so much Coli. That works awesome. Not sure how to hide this with CSS though.

Zauberbutter Over a year ago

What do you mean?

speed bump Over a year ago

you wrote: "so you can hide this with CSS."

Zauberbutter Over a year ago

@ChristianHick You're hiding this with display: none :)

speed bump Over a year ago

Ah ok mate sorry. As I wrote above I am new to html/php/javascript/css. But again thanks for your help.

Collectives™ on Stack Overflow

How to disable HTML/JavaScript form if JavaScript is disabled in browser

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related