单击按钮后在页面之间传输数据
单击按钮后在页面之间传输数据
提问于 2019-04-27 13:40:58
我正在创建一个网页，在那里用户可以申请一个公司的职位。我的目标是一旦某个工作的链接被点击，那么工作参考号已经填写了适当的数据。但是相反，文本框填充了"undefined“。
显示工作的页面和申请表单的JavaScript文件-不用担心validate变量，我不想复制整个文件。
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文件
<!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的apply按钮时，文本框"jobNumber“应该包含数字188345，但实际上它什么也不包含，有时甚至是”未定义“。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-04-27 14:27:21
您永远不会为链接添加事件侦听器。函数storeJobNumber只在初始化时被调用，你还不知道哪个链接被按下了。您需要添加在单击链接时触发的事件侦听器，然后将id保存到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"
}*/
}链接到可用的插件：http://plnkr.co/edit/EXD9jG4h2mDZNxvMKCRy?p=preview
Stack Overflow用户
发布于 2019-04-27 13:58:28
localStorage.setItem的语法是localStorage.setItem(keyname, value) .It应该类似于localStorage.setItem("jobNumber", "188345")，而不是localStorage.setItem("jobNumber", jobRefNumber) == "188345" .Ref https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Local_storage
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55877624
复制相关文章
相似问题
腾讯云开发者
