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
Related
The JavaScript function to change the image source is not working.
This is my code:
function eye() {
fun();
fun1();
}
function fun() {
if (document.getElementById("password").type == "text") {
document.getElementById("password").type = "password";
} else if (document.getElementById("password").type == "password") {
document.getElementById("password").type = "text";
}
}
function fun1() {
if (document.getElementById("eye").src == "eyec.png") {
document.getElementById("eye").src = "eye.png";
} else if (document.getElementById("eye").src == "eye.png") {
document.getElementById("eye").src = "eyec.png";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="login.css">
</head>
<body>
<header>
<button class="menu_btn" onclick="start()">
<img class="menu" src="menu.png" alt="menu" id="icon-menu">
</button>
<img class="logo" src="logo.png" alt="logo" />
<header/>
<form action="login-ctrl.php" method="post">
<div class="log-form">
<label for="email">Email:<br><input type="email" class="email" placeholder="input email...." name="email"/></label><br>
<label class="label" for="password">Password:<br><input type="password" id="password" class="password" placeholder="input password...." name="password"/><div onclick="eye()" class="eye-btn"><img src="eye.png" id="eye"></div></label>
<button class="log-but" type="submit" name="submit">login</button>
</div>
</form>
</body>
<script src="index.js"></script>
<script src="login.js"></script>
</html>
I have tried writing the functions in different scripts, but it still didn't work, it is supposed to change the source of the image to another when clicked first then back when clicked again.
When you read the parameter document.getElementById("eye").src, it returns the complete file path, like file:///C:/Users/john/Documents/eye.png. You can replace it with getAttribute('src') method:
function eye() {
fun();
fun1();
}
function fun() {
if (document.getElementById("password").type == "text") {
document.getElementById("password").type = "password";
} else if (document.getElementById("password").type == "password") {
document.getElementById("password").type = "text";
}
}
function fun1() {
if (document.getElementById("eye").getAttribute("src") == "eyec.png") {
document.getElementById("eye").src = "eye.png";
} else if (document.getElementById("eye").getAttribute("src") == "eye.png") {
document.getElementById("eye").src = "eyec.png";
}
}
Here is a simplified version that doesn't require all of the extra javascript, just a few lines of javascript and some CSS.
For this answer, I'm using javascript to detect the click and change the type.
From there, in CSS I'm changing the button's background based on type of .password. I changed the HTML so that the div is a button and it doesn't have an inline onclick nor an img tag in side.
In CSS, you can easily give the button different width/height and change the background to an image.
let pw = document.querySelector("#password");
let eye = document.querySelector(".eye-btn");
eye.addEventListener("click",(e) => {
pw.type = (pw.type == "password") ? "text" : "password";
});
.eye-btn{
width:15px;
height:15px;
outline:0;
border:0;
padding:0;margin:0;
}
.password[type='password'] ~ .eye-btn{
background:green;
}
.password[type='text'] ~ .eye-btn{
background:blue;
}
<input type="password" id="password" class="password" placeholder="input password...." value="Text to see type change" name="password"/><button type="button" class="eye-btn"></button>
The following snippet should do what you want. Even though we are not using jQuery, we should embrace its fundamental idea: "write less, do more!". This means: avoid using ids as CSS selectors and use class names instead. This way we can potentially apply a single function on many situations.
I also changed the event attachment of your click-event handler function eye() (now called showHide) - and the function itself - in some more ways, check it out below:
function showHide(ev) {
const img=ev.target, pw=img.closest(".eye-btn").previousElementSibling,
hidden=pw.type==="password";
pw.type=hidden?"text":"password";
img.src="https://upload.wikimedia.org/wikipedia/commons/thumb/"+(hidden?"c/cf/OOjs_UI_icon_eye.svg/20px-OOjs_UI_icon_eye.svg.png":"7/79/OOjs_UI_icon_eyeClosed.svg/20px-OOjs_UI_icon_eyeClosed.svg.png");
}
document.querySelectorAll(".eye-btn img").forEach(img=>img.addEventListener("click",showHide));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="login.css">
</head>
<body>
<header>
<button class="menu_btn" onclick="start()">
<img class="menu" src="menu.png" alt="menu" id="icon-menu">
</button>
<img class="logo" src="logo.png" alt="logo" />
<header/>
<form action="login-ctrl.php" method="post">
<div class="log-form">
<label for="email">Email:<br><input type="email" class="email" placeholder="input email...." name="email"/></label><br>
<label class="label" for="password">Password:<br><input type="password" id="password" class="password" placeholder="input password...." name="password"/><div class="eye-btn"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/OOjs_UI_icon_eyeClosed.svg/20px-OOjs_UI_icon_eyeClosed.svg.png"></div></label>
<button class="log-but" type="submit" name="submit">login</button>
</div>
</form>
</body>
<script src="index.js"></script>
<script src="login.js"></script>
</html>
The "relative DOM navigation" from the clicked image img to the password input field pw might be noteworthy: pw=img.closest(".eye-btn").previousElementSibling. First I move up to the closest parent element being of class "eye-btn". From there I move back to the previous element sibling (this will skip any line breaks, spaces or other text nodes in between the elements).
I am making a note-taking app and I want 2 text areas to when you type in one the other changes to
what you are doing in one. I want so when I change the title of the page it will change in other places on the page. I'll provide my current code what my page looks like (I want the change to be with my Unititled and an area next to the dropdown arrow) and what I want it to do, I've tried change and input events and I can't seem to figure it out.[My Current Site][1]
What I Want - https://share.vidyard.com/watch/Wj6uTmEiB9LR8iiZy7sVf9
[1]: https://i.stack.imgur.com/3vzEB.png
<!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.0" />
<title>Study App</title>
<link rel="stylesheet" href="study.css" />
<link href="https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-
8"></script>
</head>
<body>
<script src="study.js"></script>
<div class="dropdown">
<nav><label for="touch"><span>Settings</span></label>
<input type="checkbox" id="touch" />
<ul class="slide">
<li><a>
<div class="dark"><button onclick="myFunction()">
<input class="toggle" type="checkbox" /></button></div>
</a></li>
<li></li>
</ul>
</nav>
</div>
</div>
<div class="arrowdown">
<input type="checkbox" id="myCheckbox" onchange="rotateElem()" checked><i class="fas fa-angle-
right dropdown"></i></button>
<div class="pages">
Add Page
</div>
</div>
</div>
<script type="text/javascript">
var checkBox = document.getElementById("myCheckbox");
function rotateElem() {
if (checkBox.checked == false) {
document.querySelector('.fas.fa-angle-right.dropdown').style.transform = 'rotate(90deg)';
} else {
document.querySelector('.fas.fa-angle-right.dropdown').style.transform = 'rotate(0deg)';
}
}
</script>
<div class="tabs"></div>
<div class="sidebar">
<div class="sidebar-top">
<h1><span class="study">Study</span><span class="app">App</span></h1>
</div>
<div class="title">
<textarea id="shortInput" spellcheck="true" placeholder="Untitled" cols="30" rows="1">
</textarea>
</div>
<div class="textbox">
<textarea id="longInput" spellcheck="true" placeholder="Start typing..." cols="30" rows="10"></textarea>
</div>
<script type="text/javascript">
$('.pages').hide();
$(document).ready(function() {
$('input').click(function() {
$('.pages').slideToggle();
});
});
</script>
<script src="study.js"></script>
</body>
</html>
One possible approach would be to store the synchronised value in a variable, and add event listeners to each element for any changes. Then update the value of each element with the new value when the change occurs.
// Store the synchronised content
let value = ''
// Add change listeners to each element
const elements = document.querySelectorAll('.synced')
for (let i = 0; i < elements.length; i++) {
// Different browsers will work better with different events
// but there's no problem with listening for multiple
elements[i].addEventListener('change', handleChange)
elements[i].addEventListener('input', handleChange)
elements[i].addEventListener('keyup', handleChange)
}
// When a change occurs, set the value of all the synchronised elements
function handleChange(e) {
value = e.target.value
for (let i = 0; i < elements.length; i++) {
elements[i].value = value
}
}
<textarea class="synced"></textarea>
<textarea class="synced"></textarea>
<textarea class="synced"></textarea>
jQuery version:
// Store the synchronised content
let value = ''
// Get all the of the relevant elements
const elements = $('.synced')
// Different browsers will work better with different events
// but there's no problem with listening for multiple
elements.on('change input keyup', function() {
value = $(this).val()
elements.val(value)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="synced"></textarea>
<textarea class="synced"></textarea>
<textarea class="synced"></textarea>
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 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
When I search for a word in my dictionary service to an API through jQuery, I'm only receiving certain words back and all plural words, for example:
I can search for 'word' and get definitions, but then I search for 'words' the only response is 'Plural for word'. But when I search for 'test', I get nothing back, when there are definitions when you search for the URL in a web browser.
I feel the problem is in the part below:
if (json !== "No definition has been found.")
This is the JavaScript:
$(document).ready(function(){
$('#term').focus(function(){
var full = $("#definition").has("definition").length ? true : false;
if(full === false){
$('#definition').empty();
}
});
var getDefinition = function(){
var word = $('#term').val();
if(word === ''){
$('#definition').html("<h2 class='loading'>We haven't forgotten to validate the form! Please enter a word.</h2>");
}
else {
$('#definition').html("<h2 class='loading'>Your definition is on its way!</h2>");
$.getJSON("http://glosbe.com/gapi/translate?from=eng&dest=eng&format=json&phrase=" +word+ "&pretty=true&callback=?", function(json) {
if (json !== "No definition has been found."){
var meanings = "";
json["tuc"].forEach(function(tuc) {
tuc["meanings"].forEach(function(m) {
meanings += "<p>"+m["text"]+"</p>\n";
});
});
$("#definition").html(meanings);
}
else {
$.getJSON("http://glosbe.com/gapi/translate?from=eng&dest=eng&format=json&phrase=&pretty=true" + "?callback=?", function(json) {
console.log(json);
$('#definition').html('<h2 class="loading">Nothing found.</h2><img id="thedefinition" src=' + json.definition[0].image.url + ' />');
});
}
});
}
return false;
};
$('#search').click(getDefinition);
$('#term').keyup(function(event){
if(event.keyCode === 13){
getDefinition();
}
});
});
This is the HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Matthew Hughes">
<meta name="Dictionary" content="A dictionary web service">
<title>Dictionary Web Application</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<script src="dictionary.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="container">
<div id="top">
<header>
<h1>Dictionary Application</h1>
</header>
</div>
<div id="app">
<input type="text" placeholder="Enter a word..." id="term" />
<button id="search">Define!</button>
<section id="definition">
</section>
</div>
<footer>
<p>Created by Matthew Hughes</p>
</footer>
</div>
</body>
If anyone has any ideas or had a similar problem, please comment!