Need to append price query to the current url?

Question

Iam using below JQUery slider code..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Slider - Range slider</title>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.8.2.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.mouse.js"></script>
    <script src="../../ui/jquery.ui.slider.js"></script>
    <link rel="stylesheet" href="../demos.css">
    <style>
    #demo-frame > div.demo { padding: 10px !important; };
    </style>
    <script>
    $(function() {
        $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
                $( "#minprice" ).val( ui.values[ 0 ] );     
                $( "#maxprice" ).val( ui.values[1 ] );  

            }

        });

    });



    </script>
</head>
<body>

<div class="demo">


<form style="margin-top:10px">

      £<input type="text" size="4" id="minprice"> - £<input type="text" size="4" id="maxprice" >
<input type="hidden" name="price" id="pricefilter">

<input type="submit" value="GO" id="pricego" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">
</form>

<div id="slider-range"></div>

</div><!-- End demo -->


</body>
</html>

I shall need to tweak the form to send 2 input fields (minprice and maxprice) to the URL as 1 field (price).

I mean the o/p of url should look like:

http://www.mywebsite.com/category/shoes/?price=150-300

That will require modifying the HTML and possibly the jQuery used to manipulate the data...

So, can anyone tell me to achieve this...?

score 1 · Answer 1 · answered Oct 04 '12 at 10:23

1

Change the slide function to:

        slide: function( event, ui ) {
            $( "#minprice" ).val( ui.values[ 0 ] );     
            $( "#maxprice" ).val( ui.values[1 ] );  
            $( "#pricefilter" ).val( ui.values[0]+'-'+ui.values[1] );
        }

answered Oct 04 '12 at 10:23

Barmar

741,623
53
500
612

Hey, thanks a lot! BUT one thing, how do I assign #pricefilter value to some attribute of some other tag..? – Lisa Ray Oct 04 '12 at 10:32
Just add more statements to the function to put the value wherever you want. If you want it in a button, use `$("#button").text(ui.values[0]+'-'+ui.values[1]);`. – Barmar Oct 04 '12 at 10:42
HOW DO I ASSIGN #pricefilter VALUE TO
?
– Lisa Ray Oct 04 '12 at 11:22
You don't need to. Since it's a (hidden) field in the form, it will automatically be included in the form data when you submit. – Barmar Oct 04 '12 at 11:29

Need to append price query to the current url?

1 Answers1