We help IT Professionals succeed at work.

JQuery UI Slider in a html form

Please Help

I have a form that will have several select elements to search a property database. I understand how to get the variables the user selects and pass them to the next php page where I use sql to search a mysql database.

However This jquery Ui Slider is confusing me. I need to know how I pass the min and max price selected to the next page so I can then use $_GET['minprice] and $_GET['maxprice'] with php and then query the database.

The slider looks great in the browser BUT in the coder i have posted here i can see how i get the two seperate vaules ??? I have searched the web and cant find a solution

Can some one please show me what i need to add to the code so when the form is submitted the variables are passed to the next page

thanks in advance
Barry
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<link type="text/css" href="development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="development-bundle/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="development-bundle/ui/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="development-bundle/ui/jquery.ui.slider.js"></script>

<style type="text/css">
		#demo-frame > div.demo { padding: 10px !important; };
	body {
}
</style>
	<script type="text/javascript">
	$(function() {
		$("#slider-range").slider({
			range: true,
			min: 0,
			max: 1000000,
			values: [0, 1000000],
			slide: function(event, ui) {
				$("#amount").val('£' + ui.values[0] + ' - £' + ui.values[1]);
			}
		});
		$("#amount").val('$' + $("#slider-range").slider("values", 0) + ' - $' + $("#slider-range").slider("values", 1));
	});
	</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


</head>

<body>


<div class="range">

<label for="amount">Price range:</label>
<input name="amount" type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />


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

</div>


</body>
</html>

Open in new window

Comment
Watch Question

Commented:
Simply pass the value in one $_GET variable and the explode it to get the minimum and the maximum values:
if(isset($_GET['amount'])) { //Check if the form was sent
    $price = explode(' - ', $_GET['amount']); //split the value into 2 separate ones, $price[0] will be the min, $price[1] the max
    $price['min'] = mysql_real_escape_string(str_replace('£','',$price[0]));
    $price['max'] = mysql_real_escape_string(str_replace('£', '', $price[1]));
    if(!$find prices=mysql_query("SELECT yourfield FROM yourtable WHERE minprice<{$price['min']} AND maxprice>{$price['max']}"))
        die(mysql_error());
      //Do stuff with query result here
}
//

Open in new window

Author

Commented:
Hi thankyou for your answer I didn't use the code you showed me bu instead your code explained the solution and it pointed me in the right direction . I passed the variable then exploded it into the seperate fields and it works perfectly

Thanks a gain

regards

Baz

Author

Commented:
Hi thankyou for your answer I didn't use the code you showed me bu instead your code explained the solution and it pointed me in the right direction . I passed the variable then exploded it into the seperate fields and it works perfectly

Thanks a gain

regards

Baz

Author

Commented:
Thanks again