I'm having trouble carrying localstorage data from this form to more than one html. This code below works fine (with onload="setData()" in the body of both htmls), a user inputs text into the form, and when submitted, it is carried over to main2.html. However, I need the four submit buttons to carry that data to separate htmls.
I understand that this functions because the action="main2.html" is in the form tag. This obviously means that I can't have the same form sending this data to separate pages. Is there a way of resolving this, or do I need separate forms for each page?
SENDING PAGE HTML:
<form id="form" method="GET" action="main2.html">
<input
class="name-input"
type="text"
placeholder="YOUR NAME"
name="name"
id="name"
/>
<input
class="button1"
type="button"
value="Submit"
onclick="submitForm()"
/>
<input
class="button2"
type="button"
value="Submit"
onclick="submitForm()"
/>
<input
class="button3"
type="button"
value="Submit"
onclick="submitForm()"
/>
<input
class="button4"
type="button"
value="Submit"
onclick="submitForm()"
/>
</form>
SENDING PAGE JS
<script>
function submitForm() {
if (typeof localStorage != "undefined") {
localStorage.name = document.getElementById("name").value;
}
document.getElementById("form").submit();
}
</script>
RECEIVING PAGE HTML
<div class="hey">
<h1 id="show" class="name-placeholder">Luke Jones's</h1>
</div>
RECEIVING PAGE JS
<script>
function setData() {
if (typeof localStorage != "undefined") {
document.getElementById("show").innerHTML = localStorage.name;
}
}
</script>
This could be very messy, but I got it working by listening to the comment above and removing the form, and adding JS functions for the buttons linking them to separate pages. Also keeping the sending and receiving JS from the original question.
<input
method="GET"
class="name-input"
type="text"
placeholder="YOUR NAME"
name="name"
id="name"
/>
<input
class="button1"
type="button"
value="Page1"
onclick="myFunction1(); submitForm();"
/>
<input
class="button2"
type="button"
value="Page2"
onclick="myFunction2(); submitForm();"
/>
function myFunction1() {
window.location.href = "main2.html";
}
function myFunction2() {
window.location.href = "main3.html";
}