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

i working on this site client , today hit brick wall when found unable pass current value jquery slider url in order filter results sql query.

judging interface on site should pretty clear want accomplish, user should able select type of product want purchase, refreshes page , passes value url when button 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 user able further refine query results once category has been filtered, chose use sliders accomplish this. when sliders value changes want sql query run, refining result set ( assume have use ajax this? correct me if wrong ). problem having ?s= variable ever sent url, both ?p , ?g variables not recognised.

sql query -

$ptype = $_get['s'];  $pval = $_get['p']; $gval = $_get['g'];   $sql = "select * pumps          pump_type='$ptype'         , flow_psi <= '$pval'         , flow_gpm <= '$gval'         , high_psi <= '$pval'         , 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 ( handled 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 p , g variables not being captured on form submission? suggestions appreciated.

your problem 'p' , 'g' both in div tags, , div tags not have value attribute. can use input fields , make them hidden can have values these.

<p class="inlinelabel">psi</p><div class="filterslider" id="psislider"></div> <p class="inlinelabel">gpm</p><div class="filterslider" id="gpmslider"></div>  <input type="hidden" name="p" value="1000" /> <input type="hidden" name="g" value="1000" /> 

then when moving slider, make sure using/replacing values of input instead of trying use value on div.