I have a function with input var is name of Form and ID of input. Now I want to get the value of password input. The problem is I have some input with same ID but in different form. So I want a flexible way to get its value when I know its form.
I have tried
var x = Form_Name.ID_Name.value;
but it doesn't work. So please tell me how to get the value of password input by a flexible way. Thanks so much. Below is my code:
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<script charset="utf-8" type="text/javascript">
function check(Form_Name, ID_Name)
{
alert(document.getElementById(ID_Name).value);
alert(Form_Name);
var x = Form_Name.ID_Name.value;
alert(x);
}
</script>
<title>Untitled 1</title>
</head>
<body>
<div id="main" style="width: 300px; height: 200px;">
<form name="MainForm" id="MainForm">
<input id="ID" name="ID" type="text" size="20"/>
<input id="Pass" name="Pass" type="password" size="20"/>
</form>
<button value="click Me" onclick="check('MainForm','ID')"> Click Me </button>
</div>
</body>
</html>
I have created another button for you to get password.
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<script charset="utf-8" type="text/javascript">
function check(Form_Name, ID_Name)
{
alert(document.getElementById(ID_Name).value);
}
</script>
<title>Untitled 1</title>
</head>
<body>
<div id="main" style="width: 300px; height: 200px;">
<form name="MainForm" id="MainForm">
<input id="ID" name="ID" type="text" size="20"/>
<input id="Pass" name="Pass" type="password" size="20"/>
</form>
<button value="click Me" onclick="check('MainForm','ID')"> Click Me for ID </button>
<button value="click Me" onclick="check('MainForm','Pass')"> Click Me for Password</button>
</div>
</body>
</html>
Optimized way:
You can achieve it using the same button as well, by passing an array of ID's.
Let me know, I can help more on this.
Access username and password using it's id.
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<script charset="utf-8" type="text/javascript">
function check()
{
var username = document.getElementById("ID").value;
var password = document.getElementById("Pass").value;
alert("Username: "+username+" Password: "+password);
}
</script>
<title>Untitled 1</title>
</head>
<body>
<div id="main" style="width: 300px; height: 200px;">
<form name="MainForm" id="MainForm">
<input id="ID" name="ID" type="text" size="20"/>
<input id="Pass" name="Pass" type="password" size="20"/>
</form>
<button value="click Me" onclick="check()"> Click Me </button>
</div>
</body>
</html>
Related
At first it worked but then it stopped working can't find the error please help!
When you write in the correct username and password it only puts it in the url and doesn't work.
The demo version has css ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
DEMO <----------------------------------------------------------------
/*This Script allows people to enter by using a form that asks for a
UserID and Password*/
function pasuser(form) {
if (form.identifier.value=="GG") {
if (form.pass.value=="123") {
window.location('https://www.google.com/');
} else {
alert("Invalid Password");
}
} else { alert("Invalid UserID");
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/style.css">
<script src="/server.js"></script>
<title></title>
</head>
<body>
<div class="box">
<h2>Login</h2>
<form>
<div class="inputBox">
<input type="text" name="identifier" required="">
<label>Username</label>
</div>
<div class="inputBox">
<input type="password" name="pass" required="">
<label>Password</label>
</div>
<input type="button" value="Submit" onclick="pasuser(form)">
</form>
</div>
</body>
</html>
window.location is not a function. try window.location.assign(.....
/*This Script allows people to enter by using a form that asks for a
UserID and Password*/
function pasuser(form) {
if (form.identifier.value=="GG") {
console.log(form.identifier.value)
if (form.pass.value=="123") {
window.location.assign('https://www.google.com/');
} else {
alert("Invalid Password");
}
} else { alert("Invalid UserID");
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/style.css">
<script src="/server.js"></script>
<title></title>
</head>
<body>
<div class="box">
<h2>Login</h2>
<form>
<div class="inputBox">
<input type="text" name="identifier" required="">
<label>Username</label>
</div>
<div class="inputBox">
<input type="password" name="pass" required="">
<label>Password</label>
</div>
<input type="button" value="Submit" onclick="pasuser(form)">
</form>
</div>
</body>
</html>
How would one display an incorrect or correct words beside a form in any colour beside the field box when typing? I'm trying to make it so it gives me a real time correct and incorrect when I type in values that match the JS rule.
It should give a real time correct or incorrect beside the box and if it matches the rule then it displays correct
My HTML:
<!doctype html>
<html lang="en">
<head>
<title> Form Example </title>
<meta charset="utf-8">
<link href="keyupform.css" rel="stylesheet">
<script src="prototype.js"></script>
<script src="formkeyup.js"></script>
</head>
<body>
<div class="box" >
<form id="myForm" action="http://www.eecs.yorku.ca/~mbrown/EECS1012/testForm.php" method="get">
<!-- user id -->
<h2> Enter Info </h2>
<p> <span class="fieldName">UserID: </span>
<input type="text" id="userid" name="userid" class="input">
<span class="message"></span></p>
<!-- -->
<p style="text-align:center" class="types"> Enter Code: EECS, ESSE, MUTH, HIST, CHAP, BIO </p>
<p> <span class="fieldName"> Codes </span>
<input type="text" id="code" name="code" class="input">
<span class="message"></span></p>
<!-- Number -->
<p> <span class="fieldName"> Course Num (XXXX): </span>
<input style="width: 4em;" id="number" type="text" name="number" class="input">
<span class="message"></span></p>
<hr>
<p style="text-align:center;"> <button id="submitButton" type="button" onclick="submitbtn"> Submit </button> <input id="clear" type="reset" value="Clear"> </p>
<p style="text-align:center;" id="formError"> <p>
</form>
</div>
</body>
</html>
JS:
window.onload = function() {
$("userid").observe("keyup", enforceID);
$("code").observe("keyup", enforcecode);
$("number").observe("keyup", enforcenumbers);
$("submitButton").observe("click", submitbtn);
}
function enforceID() {
// fucntion must start with a letter and can be any number or letter after
var re = /^[A-Z][A-Z][0-9]+/i;
}
function enforcecode() {
// Only can use these Codes
var codes = ["EECS", "ESSE", "MUTH", "HIST", "CHAP", "BIO"];
var codeType = $("codeType").value;
codeType = codeType.toUpperCase();
}
function enforcenumbers() {
//Only 4 numbers allowed
var re = /^[0 -9][0 -9][0 -9][0 -9]$/
}
You can trigger the form validation on keydown event.
const form = document.getElementById('form');
document.getElementById('userid').addEventListener('keydown', event => {
form.reportValidity();
}, false);
document.getElementById('code').addEventListener('keydown', event => {
form.reportValidity();
}, false);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<form id="form">
<label for="userid">User ID:</label>
<input type="text" id="userid" name="userid" pattern="[A-Z]{2}\d+">
<br />
<label for="code">Code:</label>
<input type="text" id="code" pattern="EECS|ESSE|MUTH|HIST|CHAP|BIO" />
</form>
</body>
</html>
I know this is a very elementary question, but I am on a tight time crunch to get this project done. I am using the JQuery plugin CloneYa and after you clone the form fields I want to be able to change the form names by appending the clone count.
<!DOCTYPE html>
<html>
<head>
<title>jQuery CloneYa demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h2>Simple Cloning</h2>
<form class="form" method="get" action="panel_test_simple.html">
<div id="animate-clone">
<div class="toclone">
<p>
<input type="text" name="name" id="sname" />
<label for="name">Name</label>
</p>
<p>
<input type="text" name="email" id="semail" />
<label for="email">E-mail</label>
</p>
<p >
<input type="text" name="web" id="sweb" />
<label for="web">Website</label>
</p>
clone
delete
</div>
</div>
<p class="submit">
<input type="submit" value="Save" />
</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="jquery-cloneya.js"></script>
<script>
$('#animate-clone').cloneya({
limit : 5,
valueClone : false,
dataClone : true,
deepClone : true,
clonePosition : 'after',
serializeID : true,
defaultRender : false,
preserveChildCount: true
})
.on('after_clone.cloneya', function (event, toclone, newclone) {
// alert(toclone.attr('id'));
});
</script>
</body>
</html>
I'm trying to see where the data's being called from. I'm not sure what 'Saved' is being referred to in the line below.
I have this line:
<input type="submit" id="submit" value="Submit" data-theme="a" onclick="showAndroidData('Saved');" />
Here is the main.js file:
$('#submit').bind('click', function(){
var getfname = $('#fname').val();
var getlname = $('#lname').val();
if(getfname == ""){
$('#fname').css('border', '3px solid yellow');
return false;
}
if(getlname == ""){
$('#lname').css('border', '3px solid yellow');
return false;
}
});
function showAndroidData(data) {
var fname = $('#fname').val();
var lname = $('#lname').val();
var array = [fname, lname];
Android.showData(array);
};
and the .HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mobile Web App</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="content">
<form action="#" method="post" name="justaform" id="justaform">
<div id="pinfo" data-role="fieldcontain">
<fieldset>
<legend><h3 id="formtitle">Enter Player Information</h3></legend>
<div data-role="fieldcontain">
<label for="fname">First Name:</label>
<input type="text" name="fname" id="fname" placeholder="John" class="required" />
<label for="lname">Last Name:</label>
<input type="text" name="lname" id="lname" placeholder="Smith" class="required" />
</div>
</fieldset>
</div>
<br />
<div data-role="fieldcontain">
<div id="submit-reset-buttons">
<input type="submit" id="submit" value="Submit" data-theme="c" onclick="showAndroidData('Saved');" />
</div>
</div>
</form>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="https://www.parsecdn.com/js/parse-1.1.15.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
But not exactly sure what 'Saved' is referring to? How is it obtaining these values inputted into the text fields?
You can remove it since it is not referenced anywhere. Don't pass that string to the function so you can improve code clarity...
<input type="submit" id="submit" value="Submit" data-theme="a" onclick="showAndroidData();" />
then remove the data parameter...
function showAndroidData() {
var fname = $('#fname').val();
var lname = $('#lname').val();
var array = [fname, lname];
Android.showData(array);
};
I'm trying to code a checkbox that must be checked in order for the "Submit" button on a form to be enabled. I first tried using a linked file to no avail; now even inserting the script doesn't seem to work. Can anyone help? The entire code for the page is posted below. Thanks in advance!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="includes/imagetransition.js"></script>
<script type="text/javascript" src="includes/checkenabledisable.js"></script>
<script type="text/javascript">
var checker = document.getElementById('acknowledgment');
var sendbtn = document.getElementById('submitmessage');
// when unchecked or checked, run the function
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
</script>
<title>Contact Us</title>
</head>
<body>
<div class="page-wrapper">
<div id="header">
<img src="images/img1.jpg" name="slideshow" width="70%" height="200" alt="headerimage.gif"><br>
Previous |
Auto/Stop |
Next</div>
<br><br>
<aside class="sidebar">
<div id="vmenu">
<ul>
<li class="sideli">Home</li>
<li class="sideli">Areas</li>
<li class="sideli">Profiles</li>
<li class="sideli">Contact Us</li>
</ul>
</div>
</aside>
<section class="main">
We will review your submission and contact you, usually within 72 hours.</p>
<form action="actionemail.php" method="post">
<table class="emailtable">
<tr><td><label for="name" class="emaillabel">Name: </label></td><td><input type="text" name="fullname" size="50" value="Name" style="width: 290px;" /></td></tr>
<tr><td><label for="phone" class="emaillabel">Phone: </label></td><td><input type="text" name="phone" size="20" value="Phone" style="width: 290px;" /></td></tr>
<tr><td><label for="email" class="emaillabel">Email: </label></td><td><input type="text" name="email" size="50" value="Email" style="width: 290px;" /></td></tr>
<tr><td><label for="comment" class="emaillabel">Issue: </label></td><td><textarea rows="3" cols="26" name="comment" value="Tell Us More" style="width: 290px; height: 55px"></textarea></td></tr>
</table><br>
<input id="acknowledgment" type="checkbox" name="acknowledgment" value="1" /><label for="acknowledgment">I acknowledge that there may be a delay in responding to this request.</label><br>
<br><input id="submitmessage" type="submit" name ="submitmessage" value="Send Email" disabled />
</form>
</section>
</div>
</body>
</html>
Your function is not "listening" for an onchange event.
Use this instead. Notice I changed the checkbox to have an onclick event.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<script type="text/javascript" src="includes/imagetransition.js"></script>
<script type="text/javascript" src="includes/checkenabledisable.js"></script>
<script type="text/javascript">
function enableSubmitButton() {
if (document.getElementById("acknowledgment").checked == true)
document.getElementById("submitmessage").disabled = false;
}
</script>
<title>Contact Us</title>
</head>
<body>
<div class="page-wrapper">
<div id="header">
<img src="images/img1.jpg" name="slideshow" width="70%" height="200" alt="headerimage.gif"><br>
Previous |
Auto/Stop |
Next</div>
<br><br>
<aside class="sidebar">
<div id="vmenu">
<ul>
<li class="sideli">Home</li>
<li class="sideli">Areas</li>
<li class="sideli">Profiles</li>
<li class="sideli">Contact Us</li>
</ul>
</div>
</aside>
<section class="main">
We will review your submission and contact you, usually within 72 hours.</p>
<form action="actionemail.php" method="post">
<table class="emailtable">
<tr><td><label for="name" class="emaillabel">Name: </label></td><td><input type="text" name="fullname" size="50" value="Name" style="width: 290px;" /></td></tr>
<tr><td><label for="phone" class="emaillabel">Phone: </label></td><td><input type="text" name="phone" size="20" value="Phone" style="width: 290px;" /></td></tr>
<tr><td><label for="email" class="emaillabel">Email: </label></td><td><input type="text" name="email" size="50" value="Email" style="width: 290px;" /></td></tr>
<tr><td><label for="comment" class="emaillabel">Issue: </label></td><td><textarea rows="3" cols="26" name="comment" value="Tell Us More" style="width: 290px; height: 55px"></textarea></td></tr>
</table><br>
<input id="acknowledgment" type="checkbox" name="acknowledgment" value="1" onclick="enableSubmitButton()"><label for="acknowledgment">I acknowledge that there may be a delay in responding to this request.</label><br>
<br><input id="submitmessage" type="submit" name ="submitmessage" value="Send Email" disabled />
</form>
</section>
</div>
</body>
</html>
You should place the javascript below the definition of the items. HTML is interpreted linearly. This means that the Javascript is executed in the beginning when no items is known as "acknowledgement"
put some function name inside a script
<script type="text/javascript">
function checker()
{
var checker = document.getElementById('acknowledgment');
var sendbtn = document.getElementById('submitmessage');
// when unchecked or checked, run the function
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
}
</script>
and then you will call function in button onClick event
<form action="actionemail.php" method="post">
<br><input id="submitmessage" type="submit" name ="submitmessage" value="Send Email" disabled onclick="checker();"/>