How can I make a two page search filter function using JavaScript?

Question

I have Page1.html, which contains a drop-down menu ('s) inside a form, with a submit button. The options include Color, and Shape.

Now let's say I have an assortment of shapes displayed on Page2.html. Blue Square, Red Square, Blue Circle, Red Circle all showing on Page2.html.

Is it possible to have a JavaScript file where the JavaScript file will read what the values are on the Page1.html form, and upon clicking the submit button, will redirect to Page2.html with filtered results?

So I select the color 'blue', and the shape 'square', hit submit, and then have it redirect me to Page2.html where it hides every shape other than the Blue Squares (the one I have filtered out), or perhaps they are all hidden and it displays them?

I appreciate any answers!

Your post involves too many questions and describes almost an entire project that can be achieved in multiple ways. I suggest you to recognize what exactly is the issue that stops you from going further and use a specific question to solve that. — chimos, Jun 14 '16 at 08:50
@chimos Thank you for your comment! The specific problem is the transfer of data throughout the redirect, and having a function called upon page load where it can receive the data from the previous page. Don't know if that makes any sense? I'll try and ask it more specifically. Thanks once again. — Chris, Jun 14 '16 at 15:58
You're welcome. I don't know either ^^'. This could be related?: http://stackoverflow.com/questions/14693758/passing-form-data-to-another-html-page The answers you got seem helpful, btw. Good luck! — chimos, Jun 14 '16 at 16:16

score 1 · Accepted Answer · answered Jun 14 '16 at 09:43

By passing the data from Page1.html through get method and retrieve it on Page2.html, you can do like following

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>

score 1 · Answer 2 · answered Jun 14 '16 at 10:10

I'd suggest you do it all on one page. Mark the elements with classes that describes their color and shape like this:

<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 upon button click, e.g. blue button, you do:

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

How can I make a two page search filter function using JavaScript?

2 Answers2