Use items from local storage to pre-populate a webform

Question

I am new to HTML, CSS and Javascript.

I am building a website that has a shopping cart feature and I am able to list my products, and and remove to the shopping cart and have the UI update the shopping cart badge on the menu bar.

Upon checkout, I don't want to take payment using an e-commerce platform, instead I want to transition the page to a webform, for the customer to populate their name, address, phone number, email etc.. all the usual things, but I want a non-editable field displayed that shows the contents of their shopping cart.

When they click submit, I need this web form to email a pre-determined email address i.e. [email protected] with all these fields including the items from the shopping cart.

The part I'm struggling with, is how to retrieve the items from localStorage and put them in a web form field that is not editable but visible and part of the webform.

Any suggestions would help.

Answer 1 · 2025-11-20 09:05:45Z

how to retrieve the items from localStorage

LocalStorage#getItem()

const myValue = localStorage.getItem(yourKeyHere);

put them in a web form field that is not editable but visible

For <inputs> change the value property:

const myValue = "myValue";

document.querySelector("#a")
  .value = myValue;
document.querySelector("#b")
  .value = myValue;
document.querySelector("#c")
  .value = myValue;

<p>
  <label for="a">Disabled input</label> 
  <input id="a" type="text" disabled>
</p>
<p>
  <label for="b">Readonly input</label> 
  <input id="b" type="text" readonly>
</p>
<p>
  <label for="c">Disabled and readonly input</label> 
  <input id="c" type="text" disabled readonly>
</p>

For <textarea> components set the content:

const myValue = "myValue";

document.querySelector("#d")
  .textContent = myValue;
document.querySelector("#e")
  .textContent = myValue;
document.querySelector("#f")
  .textContent = myValue;

<p>
  <label for="d">Disabled textarea</label> 
  <textarea id="d" disabled></textarea>
</p>
<p>
  <label for="e">Readonly textarea</label> 
  <textarea id="e" readonly></textarea>
</p>
<p>
  <label for="f">Disabled and readonly textarea</label> 
  <textarea id="f" disabled readonly></textarea>
</p>

If you have jQuery, it handles all inputs the same way with .val():

const myValue = "myValue";

$("#a").val(myValue);
$("#b").val(myValue);
$("#c").val(myValue);
$("#d").val(myValue);
$("#e").val(myValue);
$("#f").val(myValue);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<p>
  <label for="a">Disabled input</label> 
  <input id="a" type="text" disabled>
</p>
<p>
  <label for="b">Readonly input</label> 
  <input id="b" type="text" readonly>
</p>
<p>
  <label for="c">Disabled and readonly input</label> 
  <input id="c" type="text" disabled readonly>
</p>
<p>
  <label for="d">Disabled textarea</label> 
  <textarea id="d" disabled></textarea>
</p>
<p>
  <label for="e">Readonly textarea</label> 
  <textarea id="e" readonly></textarea>
</p>
<p>
  <label for="f">Disabled and readonly textarea</label> 
  <textarea id="f" disabled readonly></textarea>
</p>

Collectives™ on Stack Overflow

Use items from local storage to pre-populate a webform

1 Reply 1

Your Reply

Collectives™ on Stack Overflow

Use items from local storage to pre-populate a webform

1 Reply 1

Your Reply

Sign up or log in

Post as a guest