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

<optionvalue="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:

<scripttype="text/javascript">onButtonClicked(e) {
  e.preventDefault(); // do not send the formlet select = document.getElementById('selectFortune');
  let url = select.selectedOptions[0].data('url'); // get attribute data-url valuewindow.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);

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

   let formEle = document.getElementById('<your-form-id>');
   let data = newFormData(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 submitfunctionsetselection(){
  var project = document.getElementById('selectProject').value;
  document.cookie = 'selectedProject=' + project;
}

// to get cookie on seperate pagefunctiongetselection(){
  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'';
}

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

to lean more about cookies take a look at w3schools