как отправить данные из формы на одной странице в другую форму на другой странице?

Question

У меня есть форма, в которой пользователь может заполнить любые запросы, связанные с продуктом. Я хочу получить информацию, которую заполнил пользователь, и отправить ее на новую страницу, когда пользователь нажимает кнопку «Отправить», показывая им краткое изложение того, что они написали, а затем отправить свой запрос. Ниже вы можете увидеть мой код и то, что я пытаюсь достичь.

запрос. html:

<form method="GET" action="final.html" id="myform" class="contact-form">
<label id="fullname">Full Name*</label> <br />
<input name="name" id="name" class="txt-form name" type="text" />

<label id="mail">Email*</label> <br />
<input name="email" id="email" class="txt-form email" type="email" />

<label id="cheap">Have you found this item cheaper on a competitor website?*</label><br />

<label>
<input id="radio1" type="radio" name="radio" value="1">
<label for="radio1"><span><span></span></span>Yes</label>
<input id="radio2" type="radio" name="radio" value="2">
<label for="radio2"><span><span></span></span>No</label> <br />
</label>

<div id="url">
      <label>Competitor URL</label>
      <input name="url_name" id="url-link" class="txt-form" type="url">
</div>

<label id="msg">Enquiry Message* <span id="characters">(0/200)</span></label>
<textarea name="message" id="message" class="txt-form message"type="textarea"></textarea>
<p id="asterisk">Fields marked with an *asterisk are compulsory</p>
<input type="submit" class=" btn" id="submit" value="Submit your enquiry">
</form>

сводка. html:

<div id="app" class="contact-main">
<form id="myform" class="contact-form">
</form>
</div>

JavaScript:

document.getElementById('app').innerHTML = `
<label>Full Name: </label>
<br /><br />

<label>Email:</label> <br /><br />

<label>Size of item selected:</label> <br /><br />

<label>Have you found this item cheaper on a competitor
    website?
</label><br /><br />

<div>
    <label>Competitor URL:</label> <br /><br />
</div>

<label id="msg">Enquiry Message</label><br /><br />
`;

Как Вы можете видеть выше, у меня 2 HTML файлов. Запрос. html включает форму, в которой пользователь может заполнить информацию и резюме. html включает пустую форму, которая заполняется через javascript. Я хочу, чтобы информация, указанная в запросе. html форма была отправлена ​​в сводку. html форма.

Я как бы новичок в PHP, так что если кто-нибудь может объяснить, как go об этом, это будет очень полезно.

Answer 1

Почему у вас есть сводная форма?

Также вам необходимо добавить переданные переменные:

document.getElementById('app').innerHTML = ` <label>Full Name: </label> ${name}.... <br /><br /> 

Вы можете получить переменные из URL:

const url = new URL(location.href); 
const name = url.searchParams.get("name");

Пример

// ignore this line
var serialize = function (form) { var arr = []; Array.prototype.slice.call(form.elements).forEach(function (field) { if (!field.name || field.disabled || ['file', 'reset', 'submit', 'button'].indexOf(field.type) > -1) return; if (field.type === 'select-multiple') { Array.prototype.slice.call(field.options).forEach(function (option) { if (!option.selected) return; arr.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(option.value)); }); return; } if (['checkbox', 'radio'].indexOf(field.type) >-1 && !field.checked) return; arr.push(encodeURIComponent(field.name) + '=' + encodeURIComponent(field.value)); }); return arr.join('&'); };

window.addEventListener("load",function() { // important on summary.html too

   // ------ remove from here
  document.getElementById("myform").addEventListener("submit", function(e) { // faking a submission for testing purposes
    e.preventDefault(); // remove on summary.html
    const url = new URL(this.action+"?"+serialize(this)); // to pretend to get the url from the form on the next page - remove from summary.html
   // ------ to here

  // code on summary.html
  // const url = new URL(location.href); // uncomment in summary.html




    document.getElementById('app').innerHTML = `
<label>Full Name: </label> ${url.searchParams.get("name") || "N/A"}
<br /><br />

<label>Email:</label> ${url.searchParams.get("email") || "N/A"}<br /><br />

<label>Size of item selected:</label> ${url.searchParams.get("size") || "N/A"} <br /><br />

<label>Have you found this item cheaper on a competitor
    website?
</label> ${url.searchParams.get("radio") || "N/A" } <br /><br />

<div>
    <label>Competitor URL:</label> ${url.searchParams.get("url-link") || "N/A"} <br /><br />
</div>

<label id="msg">Enquiry Message</label> ${url.searchParams.get("message") || "N/A"} <br /><br />
`;

  }); // remove from summary.html
}); // keep on summary.html

<form method="GET" action="final.html" id="myform" class="contact-form">
  <label id="fullname">Full Name*</label> <br />
  <input name="name" id="name" class="txt-form name" type="text" />

  <label id="mail">Email*</label> <br />
  <input name="email" id="email" class="txt-form email" type="email" />

  <label id="cheap">Have you found this item cheaper on a competitor website?*</label><br />

  <input id="radio1" type="radio" name="radio" value="1">
  <label for="radio1">Yes</label>
  <input id="radio2" type="radio" name="radio" value="2">
  <label for="radio2">No</label> <br />


  <div id="url">
    <label>Competitor URL</label>
    <input name="url_name" id="url-link" class="txt-form" type="url">
  </div>

  <label id="msg">Enquiry Message* <span id="characters">(0/200)</span></label>
  <textarea name="message" id="message" class="txt-form message" type="textarea"></textarea>
  <p id="asterisk">Fields marked with an *asterisk are compulsory</p>
  <input type="submit" class="btn" value="Submit your enquiry">
</form>

<div id="app"></div>