How do I get the the html form go straight to another html webpage after clickin
ID: 3776452 • Letter: H
Question
How do I get the the html form go straight to another html webpage after clicking submit? I can't get submit to work after going through the test cases correctly with javascript. when the user submits, it should go to sand.truman/edu/~jyl6557/milestone1/apo.html
html form: sand.truman.edu/~jyl6557/milestone3/milestone3-Jerry.html
<!DOCTYPE html>
<html>
<head>
<title> Alpha Phi Omega Member Login-milestone 3 by Jerry Lin</title>
<!--i used your example file,exampleHTMl5.php as a way to make user and password.-->
<meta charset="utf-8">
<script src="milestone3-Jerry.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css-milestone1.css" />
<style type="text/css">
</style>
</head>
<body>
<h2 class="center"> Alpha Phi Omega Member Login></h2>
<hr>
<p> This is the required login for the members of Alpha Phi Omega. Your username should be containing letters and number while your password is characters only from six to fourteen characters </p>
<!--The user must enter the user name, within any amount of numbers and letters or else an error will pop up -->
<!--The password must be characters only from 6 to 20 characters. -->
<p>
"Please enter your username: (contain only numbers and letters) "
<input type="text" name="username" size="30" id="username">
<span id="user-error" class="val_error"></span>
</p>
<p>
"Please enter your password: (must contain 6-14 characters only) "
<input type="text" name="pword" size="20" id="pword">
<span id="pword_error" class="val_error"></span>
</p>
<input type="hidden" name="stage" value="process">
<input type="reset" value="clear">
<!--<input type="hidden name="redirect" value="http://sand.truman.edu/~jyl6557/milestone1/apo.html"> -->
<button id= "Submit">Submit</button>
</body>
</html>
javascript file:
function checkUsername() {
user=document.getElementByID("username");
err=document.getElementById("user-error");
if(user.value=" ") {
err.innerHTML= ("Please enter your username");
return false;
}
else {
err.innerHTML="";
return true;
}
}
function checkPword() {
pword = document.getElementById("pword");
err = document.getElementById("pword_error");
if(!pword.value.match(".{6,20}") ||
!pword.value.match("[a-zA-Z}. *[a-zA-Z]") ||
!pword.value.match("d.*d"))
{
err.innerHTML = "Please enter a valid password with 6-20 characters";
return true;
}
else
{
return false;
}
}
function newPage() {
//setup_validation();
if(checkUsername() && checkPword()) {
window.open("http://sand.truman.edu/~jyl6557/milestone1/apo.html");
}
//function setup_validation() {
//var user=document.getElementById("username");
//var pword = document.getElementById("pword");
//newButton=document.getElementById("Submit");
//newButton.onclick=newPage();
//}
//user.onblur = checkUsername;
//pword.onblur=checkPword;
//if(user.value == "username" && pword.value == "pword") {
//window.open('sand.truman.edu/~jyl6557/milestone1/apo.html');
//}
//}
window.onload=function() {
newButton=document.getElementById("Submit");
newButton.onclick=newPage();
}
any suggestions on how to get the form working? the user name must contain numbers and letters with no limit, while password must be 6-14 characters only.
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<title> Alpha Phi Omega Member Login-milestone 3 by Jerry Lin</title>
<!--i used your example file,exampleHTMl5.php as a way to make user and password.-->
<meta charset="utf-8">
<script src="milestone3-Jerry.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css-milestone1.css" />
<style type="text/css">
</style>
</head>
<body>
<h2 class="center"> Alpha Phi Omega Member Login></h2>
<hr>
<p> This is the required login for the members of Alpha Phi Omega. Your username should be containing letters and number while your password is characters only from six to fourteen characters </p>
<!--The user must enter the user name, within any amount of numbers and letters or else an error will pop up -->
<!--The password must be characters only from 6 to 20 characters. -->
<p>
"Please enter your username: (contain only numbers and letters) "
<input type="text" name="username" size="30" id="username">
<span id="user-error" class="val_error"></span>
</p>
<p>
"Please enter your password: (must contain 6-14 characters only) "
<input type="text" name="pword" size="20" id="pword">
<span id="pword_error" class="val_error"></span>
</p>
<input type="hidden" name="stage" value="process">
<input type="reset" value="clear">
<!--<input type="hidden name="redirect" value="http://sand.truman.edu/~jyl6557/milestone1/apo.html"> -->
<!-- onclick method added -->
<button id= "Submit">Submit</button>
</body>
</html>
Javascript file:
function checkUsername() {
// getElementById is changed, before it is getElementByID
user=document.getElementById("username");
err=document.getElementById("user-error");
// for comparison use ==
if(user.value=="" || user.value==" ") {
err.innerHTML= ("Please enter your username");
return false;
}
else {
err.innerHTML="";
return true;
}
}
function checkPword() {
pword = document.getElementById("pword");
err = document.getElementById("pword_error");
if(!pword.value.match(".{6,20}") ||
!pword.value.match("[a-zA-Z}. *[a-zA-Z]") ||
!pword.value.match("d.*d"))
{
err.innerHTML = "Please enter a valid password with 6-20 characters";
return true;
}
else
{
return false;
}
}
function newPage() {
//setup_validation();
if(checkUsername() && checkPword()) {
window.open("http://sand.truman.edu/~jyl6557/milestone1/apo.html");
}
}
//function setup_validation() {
//var user=document.getElementById("username");
//var pword = document.getElementById("pword");
//newButton=document.getElementById("Submit");
//newButton.onclick=newPage();
//}
//user.onblur = checkUsername;
//pword.onblur=checkPword;
//if(user.value == "username" && pword.value == "pword") {
//window.open('sand.truman.edu/~jyl6557/milestone1/apo.html');
//}
//}
/*
onload method will be called as soon as the page loads, instead use onclick attribute to submit tag.
window.onload=function() {
newButton=document.getElementById("Submit");
newButton.onclick=newPage();
}
*/
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.