Data transfer once a button has been clicked

Question

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">
<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>

When the user clicks on the apply button for Database Analyst, the textbox "jobNumber" should contain the number 188345, but instead it contains "undefined"

Answer 1

localStorage.setItem("jobNumber",  "188323")

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Local_storage

Data transfer once a button has been clicked

Question

1 answers

solution1
0 2019-04-27 04:15:28

Data transfer once a button has been clicked

Question

1 answers

solution1 0 2019-04-27 04:15:28

solution1
0 2019-04-27 04:15:28