Make the option selected based on Url parameter in php - php

Question

I need to select both drop down based on the url parameter
Here is my code
<select id="parent-cat" name="parent-cat" onchange="getFilterUrl(this.value)">
<option value="www.site.co/?test=101">Test 1</option>
<option value="www.site.co/?test=102">Test 2</option>
</select>
<select id="child-cat" name="child-cat"
onchange="getFilterUrl(this.value)">
<option value="www.site.com/?sample=95">Sample 1</option>
<option value="www.site.co/?sample=96">Sample 2</option>
<option value="www.site.co/?sample=97">Sample 3</option>
<option value="www.site.co/?sample=98">Sample 4</option>
<option value="www.site.co" selected="">Sample 5</option>
</select>
<script>
function getFilterUrl(filterurl) {
var url = filterurl;
if (url) {
window.location = url; // redirect
}
return false;
}
</script>
Right now after selecting each drop down, that is refreshed to selected url,
I am looking for code, if we select first drop down, and next one,
I need to form url like below for second drop down first option.
Example: if Test 1 is selected, then, Sample 1 selected, the Url should be like beloww with both option as selected
site.co/?test=102&sample=95
How this can be done?
Please anyone help me to achieve this.
Thanks

Answer 1

As I said, your question is not clear
Here is a fixed version of your code.
document.getElementById("container").addEventListener("change",function(e) {
var parent = document.getElementById("parent-cat").value,
child = document.getElementById("child-cat").value;
if (parent && child) {
var url = "https://site.co?"+parent+"&"+child;
console.log(url)
// window.location=url;
}
});
<div id="container">
<select id="parent-cat" name="parent-cat">
<option value="">Please select</option>
<option value="test=101">Test 1</option>
<option value="test=102">Test 2</option>
</select>
<select id="child-cat" name="child-cat" >
<option value="">Please select</option>
<option value="sample=95">Sample 1</option>
<option value="sample=96">Sample 2</option>
<option value="sample=97">Sample 3</option>
<option value="sample=98">Sample 4</option>
</select>
</DIV>
In PHP:
document.getElementById("container").addEventListener("change", function(e) {
var parent = document.getElementById("parent-cat").value,
child = document.getElementById("child-cat").value;
document.getElementById("message").innerHTML= parent && child ? "":"Please choose both";
if (parent && child) document.getElementById("myForm").submit();
});
<form action="redirect.php" id="myForm" method="post">
<div id="container">
<select id="parent-cat" name="parent-cat">
<option value="">Please select</option>
<option value="test=101">Test 1</option>
<option value="test=102">Test 2</option>
</select>
<select id="child-cat" name="child-cat">
<option value="">Please select</option>
<option value="sample=95">Sample 1</option>
<option value="sample=96">Sample 2</option>
<option value="sample=97">Sample 3</option>
<option value="sample=98">Sample 4</option>
</select>
</div>
</form>
<span id="message"></span>
using
$parent = isset($_POST['parent-cat']) ? $_POST['parent-cat'] : null;
$child = isset($_POST['child-cat']) ? $_POST['child-cat'] : null;
if ($parent && $child) {
header("location: https:///www.site.co?".$parent."&".$child);
}

Answer 2

If you don't want to redirect immediately after choosing anyone just erase one of the onchange event.
HTML:
<select id="parent-cat" name="parent-cat" onchange="getFilterUrl()">
<option value="test=101">Test 1</option>
<option value="test=102">Test 2</option>
</select>
<select id="child-cat" name="child-cat"
onchange="getFilterUrl()">
<option value="sample=95">Sample 1</option>
<option value="sample=96">Sample 2</option>
<option value="sample=97">Sample 3</option>
<option value="sample=98">Sample 4</option>
<option value="www.site.co" selected="">Sample 5</option>
</select>
Script:
function getFilterUrl(filterurl) {
var s1 = $('#parent-cat').val();
var s2 = $('#child-cat').val();
if (s2 == 'www.site.co') {
s2 = '';
}
window.location.replace("http://www.site.co/?"+s1+'&'+s2);
return false;
}
In case of 5th option from the second select I exclude the second param from the url. If you have any questions - ask them.