Question

我输入的数字取决于数字，可能有3种。

财富1.“您将度过美好的一天。”

财富2。“您的日子受不幸困扰。”

财富3。“今天也不是好事。”

我想根据用户点击发送后在单独的html页面上的选择显示这些答案之一。

我将如何使用javascript完成此操作？

代码：

  <form>
<label style="color:black ;" for="selectFortune">
   <select  id="selectFortune" >
   <option value="Choice" style="color:black;">Please Pick Between 1 and 3 for your fortune</option>
   <option value="Fortune 1" style="color:black;">1</option>
   <option value="Fortune 2" style="color:black;">2</option>
   <option value="Fortune 3">3</option>
   </select>
</label>

<label for="button">
     <button type="submit" value="submit" id="sLeadSubmit" class="button-green open" data-zcom-event="studios_lead_submit" data-has-zcom-event-handler="1">Send</button>
</label>

 </form>

Answer 1

您可以在每个选项中添加data-url =“ X”

<option value="Fortune 2" style="color:black;" data-url="page1.html">2</option>

并使用

单击运行某些方法

<button onclick="onButtonClicked()" type="submit" value="submit" id="sLeadSubmit" class="button-green open" data-zcom-event="studios_lead_submit" data-has-zcom-event-handler="1">Send</button>

在onButtonClicked()方法中，您可以使用window.location.replace()并使用data-url属性值所以最终需要这样的东西：

<script type="text/javascript">
onButtonClicked(e) {
  e.preventDefault(); // do not send the form
  let select = document.getElementById('selectFortune');
  let url = select.selectedOptions[0].data('url'); // get attribute data-url value
  window.location.replace(url); // go there
}
</script>

Answer 2

要在点击事件方法中打开新窗口，可以使用：

var newTab = window.open("");

这将在浏览器窗口中打开新标签然后在此窗口内写引号，您可以使用：

newTab.document.write("Hello");

Answer 3

您可以使用cookies完成此操作：

在提交时设置cookie
在单独的页面上获取cookie

注意：下面的给定示例不适用于stackoverflow ，因为我们不允许在此处设置Cookie。

// to set cookie on submit

function setselection(){
  var project = document.getElementById('selectProject').value;
  document.cookie = 'selectedProject=' + project;
}

// to get cookie on seperate page

function getselection(){
  var name = 'selectedProject=';
  var x = document.cookie.split(';');
  var i = 0, c = 0;
  for(i = 0; i < x.length; i++) {
    c = x[i];
    while (c.charAt(0) === ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(selectedProject) === 0) {
      return c.substring(name.length, c.length);
    }
  } return '';
}

<form onsubmit="setselection();"><!-- trigger function on submit -->
  <label style="color:black ;" for="selectProject">
    <select class="form-control center-block selectArea formStyle formInput " id="selectProject" name="phone">
    <option value="Web application" style="color:black;">Please Pick Between 1 and 3 for your fortune</option>
    <option value="Fortune 1" style="color:black;">1</option>
    <option value="Fortune 2" style="color:black;">2</option>
    <option value="Fortune 3">3</option>
    </select>
  </label>

  <label for="button">
     <button type="submit" value="submit" id="sLeadSubmit" class="button-green open" data-zcom-event="studios_lead_submit" data-ha zcom-event-handler="1">Send</button>
  </label>
</form>

要进一步了解Cookie，请查看w3schools

Answer 4

表单提交事件时，您可以使用window的open（）方法并传递数据以显示答案。

let formEle = document.getElementById('<your-form-id>');
formEle.addEventListener("submit", onFormSubmit, false);

function onFormSubmit() {
   let newWindow = window.open('<your-other-page-url>');

   let formEle = document.getElementById('<your-form-id>');
   let data = new FormData(formEle);
   newWindow.formData = data;
}

然后，您可以在另一页中使用formData来读取表单数据。

如何使用JavaScript在单独的html页面上显示答案？

4 个答案: