Member Avatar for J-son

Hi there, could anyone help me how to log in to a new html page? Like, when I click on log in button, it brings me to a new page. I tried several methods but didn't work.
Thanks in advance.

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" title="style" />
<title>Identify Users</title>
<script type="text/javascript">
function validatePwd(theform){
if(theform.passwd.value==""){
alert("Please enter a password")
theform.passwd.focus()
return false
}
if(theform.passwd.value !=12345){
alert("Password incorrect")
theform.passwd.focus()
theform.passwd.select()
return false
}
return true
}
</script>
</head>
<body>
<h1 id="firsth1">Identify Users</h1>
<form onsubmit="return validatePwd(this)" id="loginform">
<fieldset>
<legend>Log in</legend>
<p>Please enter your User ID and Password to access</p>
<label for="username">
<input type="text" name="username" id="username" tabindex="1">User ID:</label>
<label for="passwd">
<input type="password" name="passwd" id="passwd" tabindex="2">Password:</label>
<label for="submit">
<input type="submit" class="submit" value="Log in" /></label>
<label for="reset">
<input type="reset" class="reset" value="Reset" /></label>
</fieldset>
</form>
</body>
</html>
  • 7 Contributors
  • 8 Replies
  • 101 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by coolshiva

Dani AI

Generated

The simplest split is: (A) a quick client-side approach for a usability prototype, and (B) the proper server-side flow for any real authentication. Several replies already pointed this out — and noticed the form needs a submission target, and correctly suggested doing real checks on the server — the two options below show how to implement each and what to watch for.

Client-side (prototype): intercept the form submit (or use a button) and, after validating the input in JavaScript, programmatically navigate to the next page. This keeps the interaction entirely in the browser which is fine for a mock-up or usability test. Example pattern:

document.querySelector('#loginForm').addEventListener('submit', function (e) {
  e.preventDefault(); // stop default submit for prototype flow
  const pwd = document.querySelector('#password').value;
  if (pwd === 'EXPECTED_PASSWORD') {
    window.location.assign('nextpage.html');
  } else {
    alert('Incorrect password');
    document.querySelector('#password').focus();
  }
});

Server-side (real login): submit the form to a server script (POST). The server checks credentials and sends an HTTP redirect on success. Do not rely on client-side checks for security. Minimal server-side pattern (PHP example):

<?php
// check_login.php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $pwd = $_POST['password'] ?? '';
  if ($pwd === 'EXPECTED_PASSWORD') {
    header('Location: dashboard.php');
    exit;
  }
  $error = 'Invalid credentials';
}
?>

Troubleshooting & cautions: check the browser console for JS errors, ensure scripts run after the DOM (or use DOMContentLoaded), verify file paths and that the target page exists, and remember header() redirects must be sent before any output in PHP. Never put real passwords or authentication logic in client-side code for production — use HTTPS and server-side verification.

Recommended Answers

All 8 Replies

Member Avatar for macneato

I see you coding in js.

Well my first thought would be is to add a simple gotoURL function. But since you want to validate the password first, i would recommend handling it all through PHP.

Member Avatar for furiber

i just tried it, yet it said password incorrect!

so it seems to me like its working.

you may want to include the dtd:
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</code>

if there's none that make's weird things on the browsers.

on the othe had the user id is after the field same with password.

you may try this:

<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<link rel="stylesheet" type="text/css" href="style.css" title="style" />
<title>Identify Users</title>
<script type="text/javascript">
function validatePwd(theform){
if(theform.passwd.value==""){
alert("Please enter a password")
theform.passwd.focus()
return false
}
if(theform.passwd.value !=12345){
alert("Password incorrect")
theform.passwd.focus()
theform.passwd.select()
return false
}
return true
}
</script>
</head>
<body>
<h1 id="firsth1">Identify Users</h1>
<form onsubmit="return validatePwd(this)" id="loginform">
<fieldset>
<legend>Log in</legend>
<p>Please enter your User ID and Password to access</p>

<label for="username">User ID:</label>

<input type="text" name="username" id="username" tabindex="1">

<label for="passwd">Password:</label>

<input type="password" name="passwd" id="passwd" tabindex="2">


<input type="submit" class="submit" value="Log in" />

<label for="reset">
<input type="reset" class="reset" value="Reset" /></label>
</fieldset>
</form>
</body>
</html>
</code>

plus i've just realised that there's no action nor method on the form, it might have got somthing to do.

hope this has been of some help

Member Avatar for J-son

Thanks u everyone, my coding is just for usability testing, that's why i didn't put too much coding and didn't do properly. And i am not a web developer, so i don't knw much about it. What i need for my testing is when click on "log in" it should go to new page but it doesn't work that way, pls help me. Password to login is 12345, but it goes nowhere. Thanks

Member Avatar for Shanti C

use this line instead of return true in your js code:

theform.action="anotherpage.php";
Member Avatar for wickedsunny

i agree with shanti. it might work. hey u can also do that use a form tag and put the fields in it and place teh validation code in a new file with stuf u want on it. then redirect teh submited code to teh new page by teh action in form tag.
let me make it clear.
<form action="newpage.html" action="post"> it will work i think :)

Member Avatar for siriyal

use this line instead of return true in your js code:

theform.action="anotherpage.php";

Hi,
Shanthi

is it work in a html page

Member Avatar for wickedsunny

yes buddy it will work i guess. u shud try.

Member Avatar for coolshiva

ya i just tried it

its working

but actually i dont know

html or any script regaurding

webdesigning

but i hvae created many blogs

by using tools provided by different sites

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.