Html with Javascript validation - javascript

The following program does not work as expected. I want to check the username and password, if they are correct then i need to navigate my page to the mentioned html.
Even though i gave the correct username and password i am getting incorrect values. Please correct the code.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>License Management System-Login</title>
</head>
<body bgcolor="00CCCC">
<h1 style="text-align:center">License Management System</h1>
<h3 style="text-align:center">Login</h3>
<div align="center">
<form method="post">
<table>
<tr>
<td>User Name:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="Login" onclick="validate()"/></td>
</tr>
</table>
</form>
</div>
</body>
<script type="text/javascript">
function validate(){
var username = document.getElementsByName("username").value;
var password = document.getElementsByName("password").value;
if ( username === "admin" && password === "admin"){
alert ("Login successfully");
window.location.assign("/License_Mgnt_System/FirstPage.html");//redirecting to other page
return true;
}
else{
alert("Enter the correct details");
return false;
}
}
</script>
</html>

getElementsByName returns a collection. You need to add [0] to get the value of username and password.
var username = document.getElementsByName("username")[0].value;
var password = document.getElementsByName("password")[0].value;

Your getElementsByName systax is not correct. use below code and you will get proper value. :)
Solution
<!DOCTYPE html>
<html>
<head>
<title>License Management System-Login</title>
<script type="text/javascript">
function validate() {
var username = document.getElementsByName("username")[0].value;
var password = document.getElementsByName("password")[0].value;
if (username === "admin" && password === "admin") {
alert("Login successfully");
window.location.assign("/License_Mgnt_System/FirstPage.html");//redirecting to other page
return true;
}
else {
alert("Enter the correct details");
return false;
}
}
</script>
</head>
<body bgcolor="00CCCC">
<h1 style="text-align:center">License Management System</h1>
<h3 style="text-align:center">Login</h3>
<div align="center">
<form method="post">
<table>
<tr>
<td>User Name:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="Login" onclick="validate()"/></td>
</tr>
</table>
</form>
</div>
</body>
</html>

Use getElementById("id")
and add id attributes to the controls. Remove name attributes.

Related

How can I set "password123" as my password in HTML login page

I would like to set "password123" as my password in my HTML login page.I need help from you to set the particular password in the below given source code.Please help me to validate my password
login.html
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.pass.value;
if(a=="")
{
alert("Please Enter Your Password");
document.form.pass.focus();
return false;
}
}
</script>
</head>
<body>
<form name="form" method="post" onsubmit="return validation()" action="class_info.html">
<tr>
<td> password:</td>
<td><input type="text" name="pass"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
If I understand you correctly, you want to check if the typed password is equal to password123, right?
If so,
<html>
<head>
<script type="text/javascript">
function validation()
{
var a = document.form.pass.value;
var valid = true;
if(a=="")
{
valid = false;
alert("Please Enter Your Password");
}
else if (a != 'password123') {
valid = false;
alert("Your Password is wrong");
}
if (valid) {
alert('form submitted');
}
else {
document.form.pass.focus();
return false;
}
}
</script>
</head>
<body>
<form name="form" method="post" onsubmit="return validation()" action="class_info.html">
<tr>
<td> password:</td>
<td><input type="text" name="pass"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>
Just add a second Comparison to your code:
if(a==="password123") {
alert("correct Password");
return true;
}
login.html
<html>
<head>
<script type="text/javascript">
function validation() {
var a = document.form.pass.value;
if(a=="") {
alert("Please Enter Your Password");
document.form.pass.focus();
return false;
} else if(a==="password123") {
alert("correct Password");
return true;
}
}
</script>
</head>
<body>
<form name="form" method="post" onsubmit="return validation()" action="class_info.html">
<tr>
<td> password:</td>
<td><input type="text" name="pass"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="sub" value="Submit"></td>
</tr>
</form>
</body>
</html>

JavaScript uncaught reference error using onclick attribute in input form tag

JavaScript Function
function submitToServer(formObject)
{
if(validateUserName(formObject["userName"]) && validatePassword(formObject["password"]))
{
formObject.submit();
}
}
HTML FORM FIELD
<form method="POST" action="SignIntoPortal">
<table>
<tr>
<td> User Name : </td>
<td>
<input type="text" id="userName" name="userName" onblur="validateUserName(this)">
<span id="userName_help" />
</td>
</tr>
<tr>
<td> Password : </td>
<td>
<input type="password" id="password" name="password" onblur="validatePassword(this)">
<span id="password_help" />
</td>
</tr>
<br>
</table>
<input type="button" name="submitButton" id="submitButton" value="Submit" onclick="submitToServer(this.form);">
</input>
</form>
The above is my code, which validates data and submits the form. but i keep getting
Uncaught ReferenceError: submitToServer is not defined
error, which I am unable to resolve. what could be the reason?
But, when I tried it with different form it worked with different names and fields.
EDIT
the difference between the code that worked and this is that, the former code does not use table it works smooth. Does scope change with table ?
You can find the code here CODE FIDDLE
You can get .html file here
SignIn.html
<html>
<head>
<title>Sign into Shopping Zone</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-8">
<style>
body
{
font: 14px verdana;
}
h1
{
font: arial-black;
color: blue;
}
</style>
<script type="javascript" language="text/javascript">
function submitToServer(formObject)
{
if(validateUserName(formObject["userName"]) && validatePassword(formObject["password"]))
{
formObject.submit();
}
}
function validateUserName(inputField)
{
if(inputField.value.length == 0)
{
document.getElementById("userName_help").innerHTML = "Please enter value";
return false;
}
else
{
document.getElementById("userName_help").innerHTML = "";
return true;
}
}
function validatePassword(inputField)
{
if(inputField.value.length == 0)
{
document.getElementById("password_help").innerHTML = "Please enter value";
return false;
}
else
{
document.getElementById("password_help").innerHTML = "";
return true;
}
}
</script>
</head>
<body>
<h1><b><i>Shopping Zone</i></b></h1>
<p> Kindly Provide Login info
</p>
<!-- SignIn Form Data for Passing to SignIntoPortal-->
<form method="POST" action="SignIntoPortal">
<table>
<tr>
<td> User Name : </td> <td><input type="text" id="userName" name="userName" onblur="validateUserName(this)"><span id="userName_help" /></td>
</tr>
<tr>
<td> Password : </td> <td><input type="password" id="password" name="password" onblur="validatePassword(this)"><span id="password_help" /></td>
</tr>
<br>
</table>
<input type="button" name="submitButton" id="submitButton" value="Submit" onclick="submitToServer(this.form)"></input>
</form>
</body>
</html>
in the script header, your 'type' and 'language' attributes are mixed up. type should be 'text/javascript' and language should be 'javascript' although the language attribute is not required
<script type="text/javascript" language="javascript">

Javascript function change text colour

So I am creating an exam entry form for school and when a user enters anything wrong, the name of the field will turn red (what the user has input will remain the same) I need to be able to do this with an onclick event activated by my reset button however the function I have right now does not do this. Here is my 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>Exam Entry</title>
<script language="javascript" type="text/javascript">
function validateForm() {
var result = true;
var msg="";
if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
if(result) document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
if(result) document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.examnumber.value=="") {
msg+="You must enter the exam number \n";
if(result) document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
if (document.ExamEntry.examnumber.value.length!=4) {
msg+="Your exam number must be exactly 4 digits \n";
if(result) document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
if(msg != ""){
alert(msg);
return result;
}
var checked = null;
var inputs = document.getElementsByName('examtype');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = inputs[i];
break;
}
}
if(checked==null) {
alert('Please choose an option');
return false;
}
else {
return confirm('You have chosen '+checked.value+' is this correct?');
}
function resetNames() {
document.getElementById('name').removeAttribute('style')
document.getElementById('subject').removeAttribute('style')
document.getElementById('examnumber').removeAttribute('style')
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" placeholder='Name' /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" placeholder='Subject' /></td>
</tr>
<tr>
<td id="examnumber">Exam Number</td>
<td><input type="text" name="examnumber" size="4" maxlength="4" placeholder='No.'/></td>
</tr>
<tr>
<td><input type="radio" id="examtypeGCSE" name="examtype" value="GCSE" /> : GCSE<br/>
<input type="radio" id="examtypeA2" name="examtype" value="A2" /> : A2<br/>
<input type="radio" id="examtypeAS" name="examtype" value="AS"/> : AS<br/>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" onclick="return resetNames();" /></td>
</tr>
</table>
</form>
</body>
</html>
I think your closing braces may be in the wrong place... move one of the two closing braces at the end of your JavaScript to the end of the validateForm() function.
try something like this
YOUR CODE
function validateForm() {
....
function resetNames() {
document.getElementById('name').removeAttribute('style')
document.getElementById('subject').removeAttribute('style')
document.getElementById('examnumber').removeAttribute('style')
}
}
CHANGE TO
function validateForm() {
......
}
function resetNames() {
document.getElementById('name').removeAttribute('style')
document.getElementById('subject').removeAttribute('style')
document.getElementById('examnumber').removeAttribute('style')
}
Reason you have nested your function one inside another.

Javascript button click on event to run a function [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Ok, I have GCSE coursework to do based on this piece of code, although the code given to us to begin with(shown below) isn't correctly working, I believe it to be because the click on event isn't running the function that validates the information entered.
<head>
<title>Exam entry</title>
<script language=”javascript” type=”text/javascript”>
function validateForm() {
var result = true;
var msg = ””;
if (document.ExamEntry.name.value == ””) {
msg += ”You must enter your name\n”;
document.ExamEntry.name.focus();
document.getElementById(‘name’).style.color = ”red”;
result = false;
}
if (document.ExamEntry.subject.value == ””) {
msg += ”You must enter the subject\n”;
document.ExamEntry.subject.focus();
document.getElementById(‘subject’).style.color = ”red”;
result = false;
}
if (msg == ””) {
return result;
} {
alert(msg)
return result;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name=”ExamEntry” method=”post” action=”success.html”>
<table width=”50%” border=”0”>
<tr>
<td id=”name”>Name</td>
<td><input type=”text” name=”name” /></td>
</tr>
<tr>
<td id=”subject”>Subject</td>
<td><input type=”text” name=”subject” /></td>
</tr>
<tr>
<td> <button type=”button” name=”Submit” value=”Submit” onclick=”return validateForm();” />"Submit"</button></td>
<td> <button type=”button” name=”Reset” value=”Reset” />Reset</td>
</tr>
</table>
</form>
</body>
This is the code now with all the updates, but it still fails to run the function :
<head>
<title>Exam entry</title>
<h1>Exam Entry Form</h1>
<script language=”javascript” type=”text/javascript”>
function validateForm() {
var result = true;
var msg = '';
if (document.ExamEntry.name.value == '') {
msg += 'You must enter your name\n';
document.ExamEntry.name.focus();
document.getElementById('name').style.color = 'red';
result = false;
}
if (document.ExamEntry.subject.value == '') {
msg += 'You must enter the subject\n';
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = 'red';
result = false;
}
if (msg == '') {
return result;
}
alert(msg);
return result;
}
</script>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td id="subject">Subject</td>
<td>
<input type="text" name="subject" />
</td>
</tr>
<tr>
<td>
<button type="button" name="Submit" value="Submit" onclick="return validateForm();" />
Submit
</td>
<td>
<button type="button" name="Reset" value="Reset" />Reset</td>
</tr>
</table>
</form>
jsFiddle
HTML
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<tr>
<td id="subject">Subject</td>
<td>
<input type="text" name="subject" />
</td>
</tr>
<tr>
<td>
<button type="button" name="Submit" value="Submit" onclick="return validateForm();" />
Submit
</td>
<td>
<button type="button" name="Reset" value="Reset" />Reset</td>
</tr>
</table>
</form>
JS
function validateForm() {
var result = true;
var msg = '';
if (document.ExamEntry.name.value == '') {
msg += 'You must enter your name\n';
document.ExamEntry.name.focus();
document.getElementById('name').style.color = 'red';
result = false;
}
if (document.ExamEntry.subject.value == '') {
msg += 'You must enter the subject\n';
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = 'red';
result = false;
}
if (msg == '') {
return result;
}
alert(msg);
return result;
}
Fixing your quotes, and other errors, your code works below.
<!DOCTYPE html>
<html>
<head>
<title>Validator</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" id="ExamEntry" method="POST" action="#" onsubmit="return validateForm();">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td>
<input id="nameField" type="text" name="name" >
</td>
</tr>
<tr>
<td id="subject">Subject</td>
<td>
<input type="text" name="subject" id="subjectField">
</td>
</tr>
<tr>
<td>
<button type="submit" name="Submit" value="Submit">"Submit"</button>
</td>
<td>
<button type="reset" name="Reset" value="Reset">Reset</button>
</td>
</tr>
</table>
</form>
<script>
function validateForm() {
var result = true;
var msg = "";
if (document.getElementById("nameField").value === "") {
msg += "You must enter your name\n";
document.ExamEntry.name.focus();
document.getElementById("name").style.color = "red";
result = false;
}
if (document.ExamEntry.subject.value === "") {
msg += "You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById("subject").style.color = "red";
result = false;
}
if (msg === "") {
return result;
}
else {
alert(msg);
return result;
}
}
</script>
</body>
</html>
We're doing the same thing. Make sure you are using Notepad and that you are saving it as a HTML file when you open it.
Hope this helped!
Also, could someone please explain what "action=success.html" does?

Button click not working

The following code was working very well. Suddenly, the Edit button click stopped working. When the user used to click Edit button, a JSON code executed. But it is not recognizing the click now. Something happened accidentally? Please assist.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script src="js/calendar.js" type="text/javascript"></script>
<link href="js/calendar.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/wysiwyg.css" type="text/css">
<script type="text/javascript" src="js/wysiwyg.js"></script>
<script type="text/javascript" src="js/wysiwyg-settings.js"></script>
<!-- JSON implementation to get data through JQuery/AJAX -->
<script type="text/javascript">
$(document).ready(function(){
$("#Edit").click(function(){
$.getJSON("fetchvalues.php?UpdateRecordID=" + $.cookie('UpdateRecordID'),
function(data){
//Fill the Form with the data values
document.getElementById('LDate').value = data[0];
document.getElementById('Places').value = data[1];
document.getElementById('Company').value = data[2];
document.getElementById('Designation').value = data[3];
document.getElementById('ProjectDetails').value = data[4];
document.getElementById('DesiredCandidate').value = data[5];
document.getElementById('HRName').value = data[6];
document.getElementById('HRContact').value = data[7];
document.getElementById('Email').value = data[8];
});
});
});
</script>
<title>Job Listing Entry</title>
</head>
<body>
<table id="main" cols="2">
<tr>
<td>
<Form id="frmNewEntry" method="post" action="insert_listing.php">
<table id="tblEntry" cols="3" style="border-color:lightblue; border-style:solid;">
<tr><td colspan="3" bgcolor="lightblue" align="center"><strong>Real-Time Vacancy Entry</strong></td></tr>
<tr><td>Date:</td><td><input id="LDate" name="LDate" type="text" size="20" maxlength="11"/>[Select Date from the Calendar Control]
<script type="text/javascript">
WYSIWYG.attach('all', full);
calendar.set("LDate");
</script></td>
<td>
<table>
<tr>
<td rowspan="6">
<!-- <iframe src="show_db_vacancy_entries.php" height="800px" width="300px" bordercolor="cyan">
</iframe> -->
</td>
</tr>
</table>
</td>
</tr>
<tr><td>Places:</td><td><input id="Places" name="Places" type="text" size="35" maxlength="30" onblur="this.value=MakeInitialCapital(this.value);"></td></tr>
<tr><td>Company:</td><td><input id="Company" name="Company" type="text" size="50" onblur="this.value=MakeInitialCapital(this.value);">
<!-- <input type="button" value="Make Initial Capital" align="left" onclick="this.value=MakeInitialCapital(this.value);"></tr> -->
<tr><td>Designation:</td><td><input id="Designation" name="Designation" type="text" size="50" onblur="this.value=MakeInitialCapital(this.value);"></td></tr>
<tr><td>Project Details:</td><td><textarea id="ProjectDetails" name="ProjectDetails" cols="100" rows="10"></textarea></td></tr>
<tr><td>Desired Candidate:</td><td><textarea id="DesiredCandidate" name="DesiredCandidate" rows="3" cols="100"></textarea> <br></td></tr>
<tr><td>HR Name:</td><td><input id="HRName" name="HRName" type="text" size="50" onblur="this.value=MakeInitialCapital(this.value);"> <br></td></tr>
<tr><td>HR Contact:</td><td><input id="HRContact" name="HRContact" type="text" size="50"> <br></td></tr>
<tr><td>Email:</td><td><input id="Email" name="Email" type="text" size="50"> <br></td></tr>
<tr></tr>
<tr>
<td bgcolor="lightblue">
<input id="Clear" name="Clear" value="Clear" type="button" onclick="ClearFields();">
</td>
<td bgcolor="lightblue">
<input id='Submit' name='Submit' value='Submit' type='submit' />
</td>
</tr>
</table>
</Form>
</td>
<td>
<table id="list" cols="2" style="border:none">
<tr>
<td colspan="2" style="border:none">
<iframe src="show_db_vacancy_entries.php" height="600px" style="border:none;">
</iframe>
</td>
</tr>
<tr>
<td align="left">
<input id="Edit" name="Edit" value="Edit Record" type="button" />
</td>
<td align="right">
<input id="Delete" name="Delete" value="Delete" type="button" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script language="JavaScript" type="text/javascript">
function MakeInitialCapital(str)
{
return str.toLowerCase().replace(/\b[a-z]/g, cnvrt);
function cnvrt() {
return arguments[0].toUpperCase();
}
}
//Convert initials to capital in a certain control
function MakeInitialCapitalControl(controlName)
{
var ctrl = document.getElementById(controlName).value;
if(/^[A-Z]/.test(ctrl.value)) {
ctrl.value = ctrl.value.toLowerCase();
return;
}
/* ctrl.value = ctrl.value.toLowerCase().replace(/\b[a-z]/g, function {
return arguments[0].toUpperCase();
});*/
}
function ClearFields()
{
document.getElementById('Email').value = "";
document.getElementById('HRContact').value = "";
document.getElementById('HRName').value = "";
document.getElementById('DesiredCandidate').value = "";
document.getElementById('ProjectDetails').value = "";
document.getElementById('Designation').value = "";
document.getElementById('Company').value = "";
document.getElementById('Places').value = "";
document.getElementById('LDate').value = "";
}
</script>
I've tested the code, after removing all the external JS and CSS files, and it seems to work fine.
The problem is most likely with the JSON data that you are getting back. Perhaps you did something to the PHP file it is calling, so that the JSON object is malformed, or there is a PHP warning being printed. (Could be a result of a change in the PHP configuration, too)
I would suggest that you try using the page in Firefox with the Firebug addon active (or something equivalent). It will show you exactly what the JSON request is returning, and whether there are any errors with the request.
As Atli said, the code looks fine. Im curious about this $.cookie('UpdateRecordID'), being part of the querystring. What happens if the cookie is not set?
Can you verify a proper response via firebug?

Categories

Resources