使用 JavaScript 在网页之间传输数据

Question

我应该点击一个按钮，然后它将重定向到一个表单页面并填写特定的详细信息。我必须获得这些数据 并使用会话对象或 cookie 将其存储在本地。

按钮代码：

<form action="Enquiry.html" method="get">
  <button class="button1" id="CreamLx">Book Now!</button>
</form>

表单页面：

<form method="post" action="" class="form1">
  <p>
    <label for="Products">Products</label>
  </p>
  <select name="Products" id="Products" required="required">
    <option value="">Please Select</option>
    <option value="Cream1">Creamy</option>
</form>

所以基本上当我单击按钮时，它应该转到表单页面并选择产品下的奶油。我应该怎么做？

Answer 1

在您的第一个表单中设置一个隐藏输入，其中包含您要选择的选项的 ID。这将通过 HTML 表单的 GET 操作传递

<form action="Enquiry.html" method="get">
    <button class="button1" id="CreamLx">Book Now!</button>
    <input type="hidden" value="Cream1" name="product">
</form>

在你的第二页

<form method="post" action="" class="form1"> 
  <p><label for="Products">Products</label></p> 
  <select name="Products" id="Products" required="required" >
  <option value="">Please Select</option>  
  <option value="Cream1">Creamy</option> 
</form>

在表单下方（最好在文档末尾）使用此 javascript，如果它位于页面顶部，它将在页面呈现之前执行。您还可以将代码提取到外部文件中。

//https://css-tricks.com/snippets/javascript/get-url-variables/
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return (false);
}

var product = getQueryVariable("product"); //get data passed over in the url

var option = document.getElementById('Products').value = product; //set the selected option