How can I get the event change on one html page influence another page that has conditionals using jquery?
Question
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!)
2 answers
solution1
0 2019-12-16 02:50:25
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
solution2
-1 2019-12-16 02:19:27
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.