How Do I Display An Answer On A Separate Html Page Using Javascript?

I've got an input that has three possible fortunes depending on the number. Fortune 1. 'You will have a great day.' Fortune 2.'Your day is bound by misfortune.' Fortune 3.'Today is

Solution 1:

To open new window within click event method you can use :

var newTab = window.open("");

This will open new tab in browser window then to write quotes within this window you can use :

newTab.document.write("Hello");

Solution 2:

You could add data-url="X" in every option

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

and run some method on click with

<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>

in onButtonClicked() method you can use window.location.replace() and make use of data-url attribute values so it would require something like this in the end:

<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>

Solution 3:

On submit event of the form You can use open() method of window and pass the data to show the answers.

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;
}

then, you can use the formData in another page to read the form data.

Solution 4:

You could get this done using cookies:

• set cookie on submit
• get cookie on seperate page

Note: the given example below will not work on stackoverflow, because we are not allowed to set cookies here.

// 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>

to lean more about cookies take a look at w3schools