1

So I have two html browsers (index.html and results.html) that should link to one another. Based on the answer the user selects from a drop-down menu on the index.html, the page should direct to results.html - meaning that the results of the page may differ depending on the user selection. How and where do I use jQuery to show this?

For more project details - User should select a location from a drop-down menu on index.html and will then show certain restaurants in that selected area in another page. All possible results are in one results.html with elements that are hidden. The below is the jQuery logic, but how can I make sure the code I am writing for index.html will link to results.html?

jQuery: 

    if (selectLocation == "Harlem") {
        $('body').removeClass().addClass('harlem'); 
    } else if (city == "Upper West Side") {
        $('body').removeClass().addClass('uws'); 
    } else {
        $('body').removeClass();
    }

EDIT: changed html browser to html page (new coder here!)

doulikepeaches
  • 69
  • 5
  • use Ajax to load result.html. – BeiBei ZHU Dec 16 '19 at 02:19
  • Does this answer your question? [How can I access the dom tree of child window?](https://stackoverflow.com/questions/1258563/how-can-i-access-the-dom-tree-of-child-window) – Kaiido Dec 16 '19 at 02:27
  • @Doulikepeaches Were any of the below answers helpful to you? If so, please select a "correct" answer *(by clicking the checkmark beside an answer)* to close the question, or provide an answer yourself and choose that as the correct answer. Otherwise, please add comments below one of the answers or edit your original question to add more detail so that additional answers can be provided. *Thanks!* – cssyphus Jul 14 '20 at 01:52

2 Answers2

0

You can use localStorage to store data between pages.

LocalStorage (aka web storage) allows you to store key-value pairs in the browser's cache. It is stored on a per-domain basis, and the data cannot be shared between pages on different domains.

Here is a simple example that should show you how it works:

Here is why the below code snippets do not work on StackOverflow - but they will work on your site

Page One

$('select').change(function(){
   let valu = this.value;
   let text = $(this).find('option:selected').text();
   localStorage.setItem('val', valu);
   localStorage.setItem('txt', text);
   window.location.href = 'page2.html'; //replace with your real page2 name
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h1>Page One</h1>
<select>
   <option value="">Choose:</option>
   <option value="bob">Bob Roberts</option>
   <option value="sue">Sue Mosher</option>
   <option value="ann">Ann Frank</option>
</select>

Page Two

let val = localStorage.getItem('val');
let txt = localStorage.getItem('txt');
$('#val').val(val);
$('#txt').val(txt);

if (val=='ann'){
  $('body').prepend('<p style="color:darkcyan;">Ann comes first in the dictionary</p>')
}else if (val == 'bob'){
  $('body').append("<h3>Bob's my uncle</h3>");
}else{
  $('body').append('<div style="height:50px;text-align:center;background:wheat;font-size:3rem;">Sam I am</div>');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h1>Page TWO</h1>
<input id="val" type="text" />
<input id="txt" type="text" />

References:

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

When is localStorage Cleared?

Community
  • 1
  • 1
cssyphus
  • 37,875
  • 18
  • 96
  • 111
-1

You cannot have one browser influence another browser.

Having said that, I believe you are instead meaning 'pages'. In this case, you would use either the jQuery method .html() or the JavaScript equivalent .innerHTML to replace the contents of an element's HTML to set an <a href> link. This could be done inside of your existing conditional as follows:

var selectLocation = "Harlem";

if (selectLocation == "Harlem") {
  $('body').removeClass().addClass('harlem');
  $('body').html('<a href="index.html">Index</a>');
} else if (city == "Upper West Side") {
  $('body').removeClass().addClass('uws');
  $('body').html('<a href="results.html">Results</a>');
} else {
  $('body').removeClass();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body></body>
Obsidian Age
  • 41,205
  • 10
  • 48
  • 71