jQuery UI slider won't allow me to pass its current value to the URL

jQuery UI slider won't allow me to pass its current value to the URL

I am currently working on this site for a client and I today hit a brick
wall when I found I was unable to pass the current value from a jQuery
slider to the URL in order to filter results from an SQL query.
Judging from the interface on the site it should be pretty clear what I
want to accomplish, a user should be able to select what type of product
they want to purchase, this currently refreshes the page and passes the
value to the url when the button is pressed.
<form name="pumpType" action="<?php echo $_SERVER['PHP_SELF'];
?>?s=<?php echo $pType ?>&p=<?php echo $pVal ?>&g=<?php echo $gVal
?>" method="get" align="center">
<div class="btn-group" data-toggle="buttons-radio">
<button type="submit" class="<?php if( $pType ==
'intermittent' ){ echo 'active '; } ?>btn btn-primary
waitingUiBut" id="but1" name="s"
value="intermittent">INTERMITTENT</button>
<button type="submit" class="<?php if( $pType ==
'continuous' ){ echo 'active '; } ?>btn btn-primary
waitingUiBut" id="but4" name="s"
value="continuous">CONTINUOUS</button>
</div>
</form>
My client wants the user to be able to further refine the query results
once the category has been filtered, I chose to use sliders to accomplish
this. When the sliders value changes I want my SQL query to run,
constantly refining the result set ( I assume I will have to use AJAX to
do this? Correct me if I am wrong ). The problem I am having is that only
the ?s= variable is ever sent to the URL, both ?p and ?g variables do not
get recognised.
SQL Query -
$pType = $_GET['s'];
$pVal = $_GET['p'];
$gVal = $_GET['g'];
$sql = "SELECT * FROM pumps
WHERE pump_type='$pType'
AND flow_psi <= '$pVal'
AND flow_gpm <= '$gVal'
AND high_psi <= '$pVal'
AND high_gpm <= '$gVal'";
jQuery Ui Slider Markup -
<div align="center" class="productSlider">
<form name="pumpSlider" action="?s=<?php echo $pType ?>&p=<?php
echo $pVal ?>&g=<?php echo $gVal ?>" method="get">
<p class="inlineLabel">PSI</p><div class="filterSlider"
id="psiSlider" name="p" value="1000"></div>
<p class="inlineLabel">GPM</p><div class="filterSlider"
id="gpmSlider" name="g" value="1000"></div>
</form>
</div>
jQuery slider submission code ( to eventually be handled by AJAX )
$(document).ready(function() {
$("#psiSlider" ).slider({
// options
start: function (event, ui) {
},
slide: function( event, ui ) {
var curValue = ui.value || initialValue;
var target = ui.handle || $('.ui-slider-handle');
var tooltip = '<div class="tooltip"><div
class="tooltip-inner">' + curValue + '</div><div
class="tooltip-arrow"></div></div>';
$(target).html(tooltip);
},
change: function(event, ui) {
$('#pumpSlider').submit();
}
});
$("#gpmSlider" ).slider({
// options
start: function (event, ui) {
},
slide: function( event, ui ) {
var curValue = ui.value || initialValue;
var target = ui.handle || $('.ui-slider-handle');
var tooltip = '<div class="tooltip"><div
class="tooltip-inner">' + curValue + '</div><div
class="tooltip-arrow"></div></div>';
$(target).html(tooltip);
},
change: function(event, ui) {
$('#pumpSlider').submit();
}
});
});
Why are my p and g variables not being captured on the form submission?
Any suggestions would be most appreciated.