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

Choosing children in jQuery can be tricky, especially when you want to avoid selecting the root element with the same name

Styling a Fixed Header in CSS/HTML - Scroll Effect

Trick to bypass inline script restrictions on Chrome extension

Guidance on implementing fallback font formats using FontFace API

Difficulty displaying data from PapaParse in VueJS despite successful retrieval in console

React Native ScrollView ref issue resolved successfully

vue-awesome-swiper / The button's name is synchronized, causing all other swiper elements to move in unison

Having trouble with the preview feature when resizing images

Utilizing Ajax to Invoke Wordpress Functions from a Client's Browser

Deleting a hyperlink within a content-editable area

Expanding the `div` element to visually occupy the entire vertical space

Place a picture and words within a submit button

Modifying information in a single array in Vue JS has a ripple effect on

How can you specifically target the initial row of a CSS grid using Tailwind?

Confusion about the unwinding of the call stack in the Graph Depth-

Creating dynamic form groups that allow for the addition and removal of forms while assigning unique identifiers and names to each input field

Having trouble with Silverlight running JavaScript?

Opencart: The Key to Your Website's Success

Removing HTML tags and then reapplying HTML tags Part 1

"Techniques for incorporating a screen in Angular application (Switching between Edit and View modes) upon user interaction