Tengo un formulario que transfiere texto de mi página principal a un nuevo HTML usando localStorage. Tengo cuatro botones en este formulario, que necesitan llevar el texto de este formulario a cuatro HTML separados cuando se hace clic. El problema es que action="" está en la etiqueta del formulario, pero no quiero formularios separados para cada página.
El formulario de la página HTML principal
<form id="form" method="GET" action="scifi.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>La página principal JS
function submitForm() { if (typeof localStorage != "undefined") { localStorage.name = document.getElementById("name").value; } document.getElementById("form").submit(); }La segunda página HTML
<div class="hey"> <h1 id="show" class="name-placeholder">Luke Jones's</h1> </div>Segunda página JS
function setData() { if (typeof localStorage != "undefined") { document.getElementById("show").innerHTML = localStorage.name; } }Así que todo esto funciona perfectamente bien para un HTML, pero si la acción = "" está en la etiqueta de formulario, ¿cómo se supone que debo hacer que el mismo formulario envíe información de almacenamiento local a diferentes ubicaciones? ¿Es posible? Gracias, Lucas.
Creo que estás buscando algo como esto.
document.getElementById("buttonDiv").addEventListener("click", e = { const tgt = e.target; if (tgt.matches("button")) { const name = document.getElementById("name").value.trim(); if (name === "") return; // no name localStorage.setItem("name"); location = tgt.dataset.page; } }) <div id="buttonDiv"> <input class="name-input" type="text" placeholder="YOUR NAME" name="name" id="name" /> <input class="button1" type="button" value="Page1" data-page="page1.html" /> <input class="button2" type="button" value="Page2" data-page="page2.html" /> <input class="button3" type="button" value="Page3" data-page="page3.html" /> <input class="button4" type="button" value="Page4" data-page="page4.html" /> </div>