I am creating a webpage where the user is able to apply for a position at a company. What I am aiming to do is once the link for a certain job is clicked then the job reference number is already filled in with the appropriate data. But instead the textbox is filled with "undefined"
The JavaScript file for both the page that displays jobs, and the application form - Don't worry about the validate variable I didn't want to copy the whole file.
function storeJobNumber(jobRefNumber) {
var da = document.getElementById("DA");
var jd = document.getElementById("JD");
var qa = document.getElementById("QA");
var fed = document.getElementById("FED");
if (da.onclick) {
localStorage.setItem("jobNumber", jobRefNumber) == "188345"
}
if (jd.onclick) {
localStorage.setItem("jobNumber", jobRefNumber) == "188386"
}
if (qa.onclick) {
localStorage.setItem("jobNumber", jobRefNumber) == "188323"
}
if (fed.onclick) {
localStorage.setItem("jobNumber", jobRefNumber) == "188357"
}
}
function job_apply(){
if (localStorage.getItem("jobNumber") !== null) {
var jobNumber = document.getElementById("jobNumber")
jobNumber.value = localStorage.getItem("jobNumber");
}
}
function init() {
if (document.getElementById("applypage")!=null) {
var regForm = document.getElementById("regform");
job_apply();
regForm.onsubmit = validate;
}
else if (document.getElementById("jobspage") !=null) {
storeJobNumber();
}
}
window.onload = init;
The apply form HTML
<!DOCTYPE html>
<html Lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="CWA HELP DESK" />
<meta name="keywords" content="HTML, CWA, Help, Desk" />
<meta name="author" content ="Harry Keys" />
<title>Application Form</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<script src="apply.js"></script>
</head>
<body id="applypage">
<form id="regform" method="post" action="http://mercury.swin.edu.au/it000000/formtest.php" novalidate="novalidate">
<img src="images/logo.png" alt="Company Logo" />
<h1> Job Application Form </h1>
<fieldset>
<p><label for="jobNumber">Job Reference Number</label>
<input type="text" onkeyup="this.value=this.value.replace(/[^\d]/,'')" name="jobNumber" id="jobNumber" maxlength="5" size="7" required="required" readonly/>
</p>
The HTML file that contains the jobs available
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Assignment Page 1" />
<meta name="keywords" content="Home, Page, Details, Company" />
<meta name="author" content ="Harry Keys" />
<title>Available Jobs </title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<script src="apply.js"></script>
</head>
<body id="jobspage">
Home
Jobs
About
Enhancements
<h1>Hartley Studios <img src="images/logo.png" alt="Company Logo" class="right"/> </h1>
<hr>
<section>
<fieldset class="JobsF">
<img src="images/Database.jpg" alt="Database Analyst"/>
<h3> Database Analyst </h3>
<p> The purpose of a Database Analyst is to Maintain data storage and access by designing physical databases...</p>
Discover
Apply
</fieldset>
<fieldset class="JobsF">
<img src="images/Software.jpg" alt="Software Developer"/>
<h3> Java Developer </h3>
<p> The purpose of a Java Developer is generally responsible for the development, design and implementation of Java products...</p>
Discover
Apply
</fieldset>
<fieldset class="JobsF">
<img src="images/QA.jpg" alt="QA Engineer"/>
<h3> QA Engineer </h3>
<p> The purpose of a QA Engineer is to put programs through rigorous tests, In an attempt to locate any areas of weakness...</p>
Discover
Apply
</fieldset>
<fieldset class="JobsF">
<img src="images/FED.jpg" alt="Front End Developers"/>
<h3> Front End Developer </h3>
<p> The front end of a website is the part users see and interact with – they play critical part of any business...</p>
Discover
Apply
</fieldset>
</section>
When the user clicks on the apply button for Database Analyst, the textbox "jobNumber" should contain the number 188345, but instead it contains "undefined"
localStorage.setItem("jobNumber", "188323")
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Local_storage
Related
I am building a site on Glitch.com for me and my friends. I already know HTML/CSS, and am learning JS.
Even though it's not that secure, I want the login system to be made out of JS since this project is just for fun and to improve my skills.
I currently have the login page with HTML/CSS, and wrote a few JS if statements for the login validation. I want the users who are logged in successfully to be redirected to another page, home.html.
However, I can still access home.html by just inserting /home.html to the end of the link, not requiring sign in. How do I fix this?
HTML code for login:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login for Access</title>
<link rel="stylesheet" href="/login.css">
<script src="/login.js" defer></script>
</head>
<body>
<h1>Login for Access</h1>
<p id = "access-denied">Incorrect User ID/Password</p>
<form id = "login-form">
<label for="user_id">User ID:</label>
<input type="number" id="user_id" name="user_id" required><br><br>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" required><br><br>
<input type="submit" value= "Submit" id = "login-submit">
</form>
</body>
</html>
JS code:
const loginForm = document.getElementById("login-form");
const loginButton = document.getElementById("login-submit");
const loginErrorMsg = document.getElementById("access-denied");
loginButton.addEventListener("click", (e) => {
e.preventDefault();
const user_id = loginForm.user_id.value;
const password = loginForm.pwd.value;
if (user_id === "id" && password === "pass") {
window.location.href="home.html";
} else {
loginErrorMsg.style.opacity = 1;
}
})
Sorry if anything is unclear. It would be greatly appreciated if someone could edit this for more clarity.
You can't use client-side code to stop people accessing pages. Client-side code is ultimately under the console of the owner of the browser.
Authentication/Authorisation has to be done server-side.
could you please help me find out what's wrong? After login, it is supposed to redirect you to another page, but nothing happens. The user name is: Joshua and the password is: Joshua#123.
<html>
<head>
<title>Login: MessengerX</title>
<link rel="stylesheet" type="text/css" href="C:\Users\Tania\Documents\Website\style.css">
<meta charset="UTF-8">
<meta name="description" content="HTML website called MessengerX. Send messages to anyone who has logged in.">
<meta name="author" content="Joshua Hurley">
<meta name="keywords" content="HTML, MessengerX, Joshua Hurley, Website, Supremefilms">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript">
var attempt = 3; // Variable to count number of attempts.
// Below function Executes on click of login button.
function validate() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "Joshua" && password == "Joshua#123") {
alert("Login successfully");
location.replace("www.youtube.com"); // Redirecting to other page.
} else {
attempt--; // Decrementing by one.
alert("You have " + attempt + " attempt left;");
// Disabling fields after 3 attempts.
if (attempt == 0) {
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
return false;
}
}
}
</script>
<script src="js/login.js"></script>
</head>
<body>
<div class="imgcontainer">
<img src="C:\Users\Tania\Documents\Website\Screenshots\face.jpg" height="500" alt="Avatar" class="avatar">
</div>
<div class="container">
<div class="main">
<h1 style="color:"><b><i>Login: MessengerX</i></b></h1>
<form id="form_id" method="post" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username" />
<label>Password :</label>
<input type="password" name="password" id="password" />
<button type="submit" value="Login" id="submit" onclick="validate()" />
</form>
<b><i>Submit</i></b>
</div>
</div>
</body>
</html>
Try this:
window.location.replace("https://www.youtube.com")
You can move code inside window.addEventListener('load' or you can move script after dom at the end
Suggestion: use the entire URL with HTTP or HTTPS.
location.replace("https://www.youtube.com");
<script type="text/javascript">
window.addEventListener('load', (event) => {
var attempt = 3; // Variable to count number of attempts.
/// code here
});
</script>
As leonardofmed mentioned, better place your script just befor </body> closing tag,
because you need to load html first, so script can see elements, otherwise at it's start there is no elements yet, so this will cause error, as for redirecting you can use:
// Simulate a mouse click:
window.location.href = "http://www.w3schools.com";
// Simulate an HTTP redirect:
window.location.replace("http://www.w3schools.com");
use <form><button type="button" ... instead
<form><button type="submit" ... has its own logic ("magic"), which is doing the problem.
use protocol in url location.replace("https://www.youtube.com"), otherwise it's relative path
BTW never validate password on client!!!
I am a freshman at a university. I have been given an assignement where I need to use addEventListener. The problem is that I haven't used it before.
What this assignment is, is that I have a json file With a list of student names. My first exercise was to show a list of all the students. I did that. But then comes the hard part, where I can't find a possible solution, when I need to show only students that are in a certain program. There are radio buttons for each of the programs and when clicked a list of the members of the program need to show up. Also there is a radio button that says "all", which need to Select all the students.
Here is my javascript file:
.then((response) => {
return response.json();
})
.then(function appendData(data) {
var unordered = document.querySelector(".studenter");
for (var i = 0; i < data.length; i++) {
var li = document.createElement("li");
li.innerHTML = 'Name: ' + data[i].fornavn + ' ' + data[i].etternavn;
unordered.appendChild(li);
}
});
Here is the HTML file:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Studenter i IIKG1002 og IDG1011</title>
<script defer src="js/studenterIKlasse.js"></script>
<link rel="stylesheet" href="css/studenterIKlasse.css" />
</head>
<body>
<h1>Studenter i IIKG1002 og IDG1011</h1>
<p>Velg klasse</p>
<div class="klasseVelger">
<div>
<input type="radio" name="programvelger" id="BIGEOMAT" />
<label for="BIGEOMAT">Bachelor in Engineering, Geomatics</label>
</div>
<div>
<input type="radio" name="programvelger" id="BWU" />
<label for="BWU">Bachelor in Web Development</label>
</div>
<div>
<input type="radio" name="programvelger" id="ÅRWEB" />
<label for="ÅRWEB">Web Design - One-year programme</label>
</div>
<div>
<input type="radio" name="programvelger" id="BIXD" />
<label for="BIXD">Interaction Design - Bachelor's Programme</label>
</div>
<div>
<input type="radio" name="programvelger" id="all" />
<label for="all">Show all</label>
</div>
</div>
<p>
<ul class="studenter"></ul>
</p>
</body>
</html>
And here is an example of what the student Object look like (json):
{
"fornavn": "Marcus Gimse",
"etternavn": "Blikstad",
"studieprogram": "Bachelor in Engineering, Geomatics",
"forkortelse": "BIGEOMAT"
},
I am creating a webpage where the user is able to apply for a position at a company. What I am aiming to do is once the link for a certain job is clicked then the job reference number is already filled in with the appropriate data. But instead the textbox is filled with "undefined"
The JavaScript file for both the page that displays jobs, and the application form - Don't worry about the validate variable I didn't want to copy the whole file.
function storeJobNumber(jobRefNumber) {
var da = document.getElementById("DA");
var jd = document.getElementById("JD");
var qa = document.getElementById("QA");
var fed = document.getElementById("FED");
if (da.onclick) {
localStorage.setItem("jobNumber", jobRefNumber) == "188345"
}
if (jd.onclick) {
localStorage.setItem("jobNumber", jobRefNumber) == "188386"
}
if (qa.onclick) {
localStorage.setItem("jobNumber", jobRefNumber) == "188323"
}
if (fed.onclick) {
localStorage.setItem("jobNumber", jobRefNumber) == "188357"
}
}
function job_apply(){
if (localStorage.getItem("jobNumber") !== null) {
var jobNumber = document.getElementById("jobNumber")
jobNumber.value = localStorage.getItem("jobNumber");
}
}
function init() {
if (document.getElementById("applypage")!=null) {
var regForm = document.getElementById("regform");
job_apply();
regForm.onsubmit = validate;
}
else if (document.getElementById("jobspage") !=null) {
storeJobNumber();
}
}
window.onload = init;
The apply form HTML
<!DOCTYPE html>
<html Lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="CWA HELP DESK" />
<meta name="keywords" content="HTML, CWA, Help, Desk" />
<meta name="author" content ="Harry Keys" />
<title>Application Form</title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<script src="apply.js"></script>
</head>
<body id="applypage">
<form id="regform" method="post" action="http://mercury.swin.edu.au/it000000/formtest.php" novalidate="novalidate">
<img src="images/logo.png" alt="Company Logo" />
<h1> Job Application Form </h1>
<fieldset>
<p><label for="jobNumber">Job Reference Number</label>
<input type="text" onkeyup="this.value=this.value.replace(/[^\d]/,'')" name="jobNumber" id="jobNumber" maxlength="5" size="7" required="required" readonly/>
</p>
The HTML file that contains the jobs available
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Assignment Page 1" />
<meta name="keywords" content="Home, Page, Details, Company" />
<meta name="author" content ="Harry Keys" />
<title>Available Jobs </title>
<link href="style/style.css" rel="stylesheet" type="text/css">
<script src="apply.js"></script>
</head>
<body id="jobspage">
Home
Jobs
About
Enhancements
<h1>Hartley Studios <img src="images/logo.png" alt="Company Logo" class="right"/> </h1>
<hr>
<section>
<fieldset class="JobsF">
<img src="images/Database.jpg" alt="Database Analyst"/>
<h3> Database Analyst </h3>
<p> The purpose of a Database Analyst is to Maintain data storage and access by designing physical databases...</p>
Discover
Apply
</fieldset>
<fieldset class="JobsF">
<img src="images/Software.jpg" alt="Software Developer"/>
<h3> Java Developer </h3>
<p> The purpose of a Java Developer is generally responsible for the development, design and implementation of Java products...</p>
Discover
Apply
</fieldset>
<fieldset class="JobsF">
<img src="images/QA.jpg" alt="QA Engineer"/>
<h3> QA Engineer </h3>
<p> The purpose of a QA Engineer is to put programs through rigorous tests, In an attempt to locate any areas of weakness...</p>
Discover
Apply
</fieldset>
<fieldset class="JobsF">
<img src="images/FED.jpg" alt="Front End Developers"/>
<h3> Front End Developer </h3>
<p> The front end of a website is the part users see and interact with – they play critical part of any business...</p>
Discover
Apply
</fieldset>
</section>
When the user clicks on the apply button for Database Analyst, the textbox "jobNumber" should contain the number 188345, but instead it contains nothing or sometimes "undefined"
You never add event listeners for the links. The function storeJobNumber only gets called on init, where you don't know which link is pressed yet. You need to add the event listeners to trigger when the links are clicked and then save the id to localstorage.
Like this:
function storeJobNumber(jobRefNumber) {
var da = document.getElementById("DA");
var jd = document.getElementById("JD");
var qa = document.getElementById("QA");
var fed = document.getElementById("FED");
// new code
da.addEventListener("click", function() {
localStorage.setItem("jobNumber", 188345);
});
jd.addEventListener("click", function() {
localStorage.setItem("jobNumber", 188386);
});
qa.addEventListener("click", function() {
localStorage.setItem("jobNumber", 188323);
});
fed.addEventListener("click", function() {
localStorage.setItem("jobNumber", 188357);
});
/* Old code
if (da.onclick) {
localStorage.setItem("jobNumber", jobRefNumber) == "188345"
}
if (jd.onclick) {
localStorage.setItem("jobNumber", jobRefNumber) == "188386"
}
if (qa.onclick) {
localStorage.setItem("jobNumber", jobRefNumber) == "188323"
}
if (fed.onclick) {
localStorage.setItem("jobNumber", jobRefNumber) == "188357"
}*/
}
Link to working pluker: http://plnkr.co/edit/EXD9jG4h2mDZNxvMKCRy?p=preview
The syntax of localStorage.setItem is localStorage.setItem(keyname, value) .It should be like localStorage.setItem("jobNumber", "188345") instead of localStorage.setItem("jobNumber", jobRefNumber) == "188345" .Ref https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Local_storage
Unfortunately, I am not sure to understand anything to java, jquery and all this kind of thing. Nevertheless, I am trying to get some inspiration on forums in order to make a personal website that contains a vertical navbar and a div container in which external html pages will be loaded. Each html file uses an html5 applet called JSmol, which plots 3D molecules that can be manipulated interactively. The main page looks like this:
<!DOCTYPE html>
<html>
<head>
<title> 3D Chemistry </title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="Chem3D-CSS/MolChem.css" />
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<!-- META TAGS start -->
<meta name="Title" content="Molecular Chemistry" />
<meta charset="UTF-8">
<!-- META TAGS end -->
<script type="text/javascript">
$(document).ready(function() {
// select all the links with class="lnk", when one of them is clicked, get its "href" value
// load the content from that URL and check the "status" of the request
// place the response or an error message into the tag with id="content"
$('a.lnk').click(function() {
var url = $(this).attr('href');
$('#content').load(url, function(response, status, xhr) {
// check the status, if "success", place the response into #content
// else, if "error", define an error message and insert it into #content
// else, display an Alert with the status
if(status=='success') {
$('#content').html(response);
}
else if(status=='error') {
var ermsg = '<i>There was an error: '+ xhr.status+ ' '+ xhr.statusText+ '</i>';
$('#content').html(ermsg);
}
else { alert(status); }
});
return false;
})
});
</script>
</head>
<body class="s_page" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div id="header"> <a id="UPS-link" href="http://www.univ-tlse3.fr/" title="Paul Sabatier University - Toulouse III">
<img src="Chem3D-IMAGES/UT3_PRES_logoQ.png" alt="Paul Sabatier University" id="logoUPS" width=300px />
</a>
</div>
<div id="vmenu">
<ul>
<li>Home</li>
<li>3D Molecules
<ul>
<li>Mol1</li>
<li>Mol2</li>
</ul>
</li>
<li>Symmetry
<ul>
<li>Symmetry Elements
<ul>
<li>C<sub>2</sub>H<sub>6</sub></li>
<li>Ru<sub>4</sub>H<sub>4</sub>(CO)<sub>12</sub></li>
</ul>
</li>
<li>Point Groups
</li>
</ul>
</li>
<li>Solids
<ul>
<li>fcc</li>
<li>hcp</li>
</ul>
</li>
</ul>
</div>
<div id="content">
</div>
<div class="s_author" id="footer">
author: romuald.poteau_at_univ-tlse3.fr
<br/>last modification: 2013/12/16
</div>
</body>
</html>
Up to now, I have worked on the PG.html file (Point Group entry in the vertical menu), which works perfectly fine when it is loaded separately. But is not the case when it is loaded inside the main page as an external html page. The title is the only thing that appears, it seems that the jsmol application is not properly initialized. May be this is specific to the invocation of jsmol ; or is this a general issue when one wants to load hmtl files with embedded scripts ?
<!DOCTYPE html>
<html>
<head>
<title> POINT GROUPS </title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="Chem3D-CSS/MolChem.css" />
<!-- META TAGS start -->
<meta name="Title" content="Molecular Chemistry" />
<meta name="Format" content="text/html" />
<meta name="Language" content="en" />
<meta charset="UTF-8">
<!-- META TAGS end -->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="./JSmol.min.js"></script>
<script type="text/javascript">
// ---------------------------------------------------------------------------------
////// every page will need one variable and one Info object for each applet object
var Info = {
width: 500,
height: 500,
color: "0xC0C0C0",
use: "HTML5",
jarPath: "java",
j2sPath: "j2s",
jarFile: "JmolApplet.jar",
isSigned: false,
addSelectionOptions: false,
serverURL: "php/jsmol.php",
readyFunction: jmol_isReady,
console: "jmol_infodiv",
disableInitialConsole: true,
debug: false,
}
</script>
</head>
<body class="s_page" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div class="s_title" id="titlePG">
Point Groups
</div>
<div class="s_normal" id="mainPG">
<table border="0">
<tbody>
<tr valign="top">
<td nowrap="nowrap">
<script type="text/javascript">
Jmol.getApplet("Jmol1", Info);
Jmol.script(Jmol1,'load Chem3D-data/nh2cl.xyz;');
Jmol.resizeApplet(Jmol1, 500);
</script>
<br>
</td>
<td>
<script>
Jmol.setButtonCss(null,"style='width:300px'")
Jmol.jmolButton(Jmol1,"load Chem3D-data/nh2cl.xyz;", "NH2Cl (Cs)");
Jmol.jmolBr();
Jmol.jmolButton(Jmol1,"load Chem3D-data/cis-dichloroethylene.xyz;", "cis-dichloroethylene (C2v)");
Jmol.jmolBr();
Jmol.jmolButton(Jmol1,"load Chem3D-data/trans-dichloroethylene.xyz;", "trans-dichloroethylene (C2h)");
</script>
<br>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I have tried to find an answer to this question by checking previous posts, but my poor skills do not allow me to identify relevant suggestions for such issue.
Thanks for any help.
// Create a DOM object from a URL
$html = file_get_html('http://www.google.com/');
// Create a DOM object from a HTML file
$html = file_get_html('test.htm');