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

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

1 个答案: