What is the best approach to create a JavaScript search filter function spanning two pages?

Question

What is the best approach to create a JavaScript search filter function spanning two pages?

Page1.html has a form with a drop-down menu containing options Color and Shape. There is also a submit button.

Assuming Page2.html displays various shapes like Blue Square, Red Square, Blue Circle, Red Circle, is it feasible to create a JavaScript file that can read the values selected in the form on Page1.html? Upon submitting, the JavaScript will redirect to Page2.html with filtered results.

For example, if 'blue' and 'square' are selected in the form and submitted, can we hide all shapes on Page2.html other than Blue Squares? Or perhaps display only the filtered shapes?

I am curious to hear your thoughts on this scenario!

javascript jquery html css filter

Answer 1

Answer №1

To transfer data from Page1.html using the get method and then access it on Page2.html, you can follow these steps:

Page1.html

<!DOCTYPE html>
<html>
<body>
<form action="Page2.html" method="get">
    <select name="color" >
        <option>Blue</option>
        <option>Red</option>
    </select>
    <br><br>
    <select name="shape" >
        <option>Square</option>
        <option>Circle</option>
    </select>
    <br><br>
    <input type="submit" />
</form>
</body>
</html>

Page2.html

<!DOCTYPE html>
<html>
<body>
<style>
    .RedSquare{width:200px;height:200px;background:red;}
    .BlueSquare{width:200px;height:200px;background:blue;}
    .RedCircle{width:200px;height:200px;background:red;border-radius:50%;}
    .BlueCircle{width:200px;height:200px;background:blue;border-radius:50%;}
</style>
<div class="RedSquare"></div>
<div class="BlueSquare"></div>
<div class="RedCircle"></div>
<div class="BlueCircle"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
function getURLParameter(name) {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}

color = getURLParameter('color');
shape = getURLParameter('shape');
classname="."+color+shape;
$("div").hide();
$(classname).show();
</script>
</body>
</html>

Answer 2

To transfer data from Page1.html using the get method and then access it on Page2.html, you can follow these steps:

Page1.html

<!DOCTYPE html>
<html>
<body>
<form action="Page2.html" method="get">
    <select name="color" >
        <option>Blue</option>
        <option>Red</option>
    </select>
    <br><br>
    <select name="shape" >
        <option>Square</option>
        <option>Circle</option>
    </select>
    <br><br>
    <input type="submit" />
</form>
</body>
</html>

Page2.html

<!DOCTYPE html>
<html>
<body>
<style>
    .RedSquare{width:200px;height:200px;background:red;}
    .BlueSquare{width:200px;height:200px;background:blue;}
    .RedCircle{width:200px;height:200px;background:red;border-radius:50%;}
    .BlueCircle{width:200px;height:200px;background:blue;border-radius:50%;}
</style>
<div class="RedSquare"></div>
<div class="BlueSquare"></div>
<div class="RedCircle"></div>
<div class="BlueCircle"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
function getURLParameter(name) {
  return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}

color = getURLParameter('color');
shape = getURLParameter('shape');
classname="."+color+shape;
$("div").hide();
$(classname).show();
</script>
</body>
</html>

Answer 3

Answer №2

My recommendation would be to consolidate everything onto a single page. Use classes to label the elements based on their color and shape, as shown below:

<div class="RedSquare item red square"></div>
<div class="BlueSquare item blue square"></div>
<div class="RedCircle item red circle"></div>
<div class="BlueCircle item blue circle"></div>

Then, when a button is clicked (like the blue button), you can execute the following code:

$('.item').hide(); $('.blue').show();

Answer 4

My recommendation would be to consolidate everything onto a single page. Use classes to label the elements based on their color and shape, as shown below:

<div class="RedSquare item red square"></div>
<div class="BlueSquare item blue square"></div>
<div class="RedCircle item red circle"></div>
<div class="BlueCircle item blue circle"></div>

Then, when a button is clicked (like the blue button), you can execute the following code:

$('.item').hide(); $('.blue').show();

What is the best approach to create a JavaScript search filter function spanning two pages?

Answer №1

Answer №2

Similar questions

Navigate to the end of the progress bar once finished

I added an onClick event to an SVG image, however, I am struggling to get the event to execute a jQuery if/else statement

Adding one class at a time, with each new class being added every second

Honing in on JavaScript Media Queries within React

Dynamically extract key values from JSON data and display them on an HTML page with checkboxes for selection. Generate a new JSON object containing

What is the behavior of the JavaScript event loop when a Promise's resolution is tied to setTimeout?

struggling to browse through HTML files in eclipse while utilizing the Tomcat server

Issue with .live function toggle (close) not functioning properly following an ajax call

Hovering over an image will not cause the floating header to appear

Updating a nested object within an array in a ReactJs component

Showing text beside an image within a division

What steps can I take to properly center and repair my web page that is currently a mess

Client request: receive a daily update detailing the differences between two databases

The positioning problem arising from using a Vuetify select dropdown within a datatable

simpleCart - Utilizing a modal window for easy input and sending the shopping cart data to PHP in a multidimensional array

When incorporating reduce into your code, remember to expect an undefined

Error encountered on Facebook Like button: The large button is failing to show the total number of likes received

What could be causing the issue with the malfunctioning Ajax pagination?

Immersive video platform combining HTML5 and Flash technologies

Validating date parameter in Wiremock request - How to ensure dynamic date matching during testing?