How do I use localstorage to store text on a form and return it on another form in read-only format

Issue

<form action="apply.html" method="post">
  <div class="cloudinformation">
    <h2>
      Job reference number:
    </h2>
    <br>
    <h4>
    1FN43
    <br>
    <input type="submit" value="Apply">
  </div>
</form>

<form action="apply.html" method="post">
  <div class="cloudinformation">
    <h2>
      Job reference number:
    </h2>
    <br>
    <h4>
    6LZ9W
    <br>
    <input type="submit" value="Apply">
  </div>
</form>

I've got 3 different forms on 1 page and I need to use JavaScript to make it where, depending on which form I submit, the corresponding job reference number will be stored in local storage and displayed on another form on another page, the aforementioned 'apply.html' page in read-only form. I only know how to store an input but not text already on the form. Should I make 3 separate 'apply.html' pages for each form or how can I make it using 1 for all 3 forms.

Note: I cannot use jQuery.

<form action="https://mercury.swin.edu.au/it000000/formtest.php" method="post" id="regform">
    
    <label>Job Reference Number</label>
    <input type="text" id="onlyletters" name="onlyletters" pattern="[a-zA-Z0-9]+" minlength="5" maxlength="5" placeholder="Reference number for specified job.." required="required">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name.." required="required" maxlength="25" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)">
    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name.." required="required" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)">
    <label for="start">Date of birth:</label>
    <input type="date" id="start" required="required" name="trip-start" value="2021-08-30">
    <br>
    <br>
    <label for="gender"> Select you gender</label>
    <br>
    <br>
    <select name="gender" id="gender" required="required">
      <option value="" selected>Please Select</option>
      <option value="male">Male</option>
      <option value="female">Female</option>
    </select>
    <br>
    <label for="streetname">Street Address</label>
    <input type="text" id="streetname" name="streetname" required="required" placeholder="Your street name..." maxlength="40" />
    <label for="suburb">Suburb/Town</label>
    <input type="text" id="suburb" name="suburb" required="required" placeholder="Your suburb/town..." maxlength="40">
    <label for="state">Choose a state:</label>
    <br>
    <select name="state" id="state" required="required">
      <option value="">Please Select</option>
      <option value="VIC">VIC</option>
      <option value="NSW">NSW</option>
      <option value="QLD">QLD</option>
      <option value="NT">NT</option>
      <option value="WA">WA</option>
      <option value="SA">SA</option>
      <option value="TAS">TAS</option>
      <option value="ACT">ACT</option>
    </select>
    <br>
    <br>
    <label for="postcode">Postcode</label>
    <input type="text" id="postcode" name="postcode" required="required" placeholder="Your postcode..." maxlength="4" minlength="4" pattern="^[0-9]{4}$">
    <label for="email">Email Address</label>
    <input type="text" id="email" name="emailadd" placeholder="Your email address.." required="required">
    <label for="phone">Phone Number</label>
    <input type="text" id="phone" name="phonenumb" placeholder="e.g. 0451124561" minlength="8" maxlength="12" required="required">
    <input type="submit" value="Apply">
  </form>

Solution

From what you are showing us, I tend to believe that the first forms designed to pass job references to the real applying form are overkill. I think a simple link would be enough. For instance:

<div class="cloudinformation">
    <h2>
      Job reference number:
    </h2>
    <br>
    <h4>6LZ9W<h4>
    <br>
     
    <a href="apply.html?job_reference=6LZ9W">Apply</a>
</div>

After you can easily access job reference in javascript from the apply page:

// Retrieve job_reference from url parameter.
let params = (new URL(document.location)).searchParams;
let jobReference = params.get('job_reference');

// Set the form input value
document.querySelector('#onlyletters').value = jobReference;

URL.searchParams documentation

document.querySelector documentation

Answered By - nubinub