get value from multiple dropdown and add value to url - php

Question

I have tried this code, that can display selected value and refresh the page .
This is the HTML
<select name="selectperiode" style="width:200px;" class="chzn-select" data-placeholder="Report Periode">
<option value=""></option>
<option value="1">Yearly</option>
<option value="4">Quarterly</option>
</select>
And this is the JQuery:
<script>
$(function(){
$("[name=selectperiode]").change(function(){
var val = $(this).val();
var stat;
if (typeof val !== 'undefined') {
stat = val;
}
else {
stat = '';
}
window.location.href = './corpreport.php?per='+stat;
return true;
});
});
</script>
It works fine. So I added one more dropdown and added some code with the code below:
<select name="selecttype" style="width:200px;" class="chzn-select" data-placeholder="Report Type">
<option value=""></option>
<option value="Pie">Pie</option>
<option value="Line">Line</option>
<option value="Bar">Bar</option>
<option value="Column">Column</option>
</select>
And this is the jquery
<script>
$(function(){
$("[name=selecttype]").change(function(){
var val = $(this).val();
var stat;
if (typeof val !== 'undefined') {
stat = val;
}
else {
stat = '';
}
window.location.href = './corpreport.php?per=<?php echo $_GET['per']; ?>&type='+stat;
return true;
});
});
</script>
It will produce localhost/folder1/file.php?per=1&type=Pie if you choose Yearly and Pie.
But when I change the periode to Quarterly, then the link change to localhost/folder1/file.php?per=4.
What should I do to make the link localhost/folder1/file.php?per=4&type=Pie ??

Answer 1

You can use the following jQuery:
$(function () {
$("[name=selectperiode]").change(function () {
window.location.href = period(this) + type($("[name=selecttype]"));
return true;
});
$("[name=selecttype]").change(function () {
window.location.href = period($("[name=selectperiode]")) + type(this);
return true;
});
function period(element) {
var val = $(element).val();
var stat;
if (typeof val !== 'undefined') {
stat = val;
} else {
stat = '';
}
return './corpreport.php?per=' + stat;
}
function type(element) {
var val = $(element).val();
var stat;
if (typeof val !== 'undefined') {
stat = val;
} else {
stat = '';
}
return '&type=' + stat;
}
});
With this PHP/HTML:
<?php
$per = (!empty($_GET["per"])) ? $_GET["per"] : '';
$type = (!empty($_GET["type"])) ? $_GET["type"] : '';
?>
<select name="selectperiode" style="width:200px;" class="chzn-select" data-placeholder="Report Periode">
<option value=""></option>
<option value="1" <?php if($per == "1"){echo "selected";} ?>>Yearly</option>
<option value="4" <?php if($per == "4"){echo "selected";} ?>>Quarterly</option>
</select>
<select name="selecttype" style="width:200px;" class="chzn-select" data-placeholder="Report Type">
<option value=""></option>
<option value="Pie" <?php if($type == "Pie"){echo "selected";} ?>>Pie</option>
<option value="Line" <?php if($type == "Line"){echo "selected";} ?>>Line</option>
<option value="Bar" <?php if($type == "Bar"){echo "selected";} ?>>Bar</option>
<option value="Column" <?php if($type == "Column"){echo "selected";} ?>>Column</option>
</select>

Answer 2

Assign ids to both select for instance period, type. Get values of both selects on change event to make the url.
Html
<select id="period" name="selectperiode" style="width:200px;" class="chzn-select" data-placeholder="Report Periode">
<option value=""></option>
<option value="1">Yearly</option>
<option value="4">Quarterly</option>
</select>
<select id="type" name="selecttype" style="width:200px;" class="chzn-select" data-placeholder="Report Type">
<option value=""></option>
<option value="Pie">Pie</option>
<option value="Line">Line</option>
<option value="Bar">Bar</option>
<option value="Column">Column</option>
</select>
Javascript
$("[name=selecttype]").change(function(){
var period = document.getElementById('period').value;
var type = document.getElementById('type').value;
window.location.href = './corpreport.php?per=' + period + '&type='+type;
return true;
});

Answer 3

<select id="selectperiode" style="width:200px;" class="chzn-select" data-placeholder="Report Periode">
<option value=""></option>
<option value="1">Yearly</option>
<option value="4">Quarterly</option>
</select>
<select id="selecttype" name="selecttype" style="width:200px;" class="chzn-select" data-placeholder="Report Type">
<option value=""></option>
<option value="Pie">Pie</option>
<option value="Line">Line</option>
<option value="Bar">Bar</option>
<option value="Column">Column</option>
</select>
Jquery
$(document).ready(function () {
$("#selecttype").change(function () {
var period = $("#selectperiode").val();
var type = $("#selecttype").val();
window.location.href = './corpreport.php?per=' + period + '&type=' + type;
return true;
});
});