javascript - 如何将数据从一页上的表单发送到不同页面上的不同表单？

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 文件。 enquiry.html 包含用户可以填写信息的表单，summary.html 包含一个通过 javascript 填写的空白表单。我希望将 enquiry.html 表单中输入的信息发送到summary.html 表单。

我对 PHP 有点陌生，所以如果有人能解释如何去做这件事，那将会非常有帮助。

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>