单击按钮后在页面之间传输数据 [英] Transferring Data between pages once a button is clicked
问题描述
我正在创建一个网页，用户可以在其中申请公司的职位.我的目标是一旦点击某个职位的链接，职位参考编号就已经填写了适当的数据.但是文本框填充的是未定义"
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"
显示工作的页面和申请表的 JavaScript 文件 - 不要担心我不想复制整个文件的验证变量.
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;
申请表单 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>
包含可用作业的 HTML 文件
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">
<a href="index.html" class="button">Home</a>
<a href="jobs.html" class="button">Jobs</a>
<a href="about.html" class="button">About</a>
<a href="Enhancements.html" class="button">Enhancements</a>
<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>
<a href="#DA" class="button">Discover</a>
<a href="apply.html" class="button" id="DA">Apply</a>
</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>
<a href="#SD" class="button">Discover</a>
<a href="apply.html" class="button" id="JD">Apply</a>
</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>
<a href="#QA" class="button">Discover</a>
<a href="apply.html" class="button" id="QA">Apply</a>
</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>
<a href="#FED" class="button">Discover</a>
<a href="apply.html" class="button" id="FED">Apply</a>
</fieldset>
</section>
当用户单击 Database Analyst 的应用按钮时，文本框jobNumber"应包含数字 188345，但它不包含任何内容或有时包含未定义"
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"
推荐答案
您从不为链接添加事件侦听器.函数 storeJobNumber 仅在 init 时调用，此时您还不知道按下了哪个链接.您需要添加事件侦听器以在单击链接时触发，然后将 id 保存到 localstorage.
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.
像这样:
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"
}*/
}
工作 pluker 链接:http://plnkr.co/edit/EXD9jG4h2mDZNxvMKCRy?p=预览
Link to working pluker: http://plnkr.co/edit/EXD9jG4h2mDZNxvMKCRy?p=preview
这篇关于单击按钮后在页面之间传输数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
