i am working on e-commerce website and in products section i want to give a function to sort product by price range like 100 to 500 but i have no idea to connect html radio button with mysql that on click product get sort on screen.
[enter image description here][1]
This is html code for radio button
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
<ul class="radio">
<li><input type="radio" name="radio" id="r1" value="radio"/>
<label for="radio1">100-500</label></li>
<li><input type="radio" name="radio" id="r2" value="radio2"/>
<label for="radio2">600-1000</label></li>
<li><input type="radio" name="radio" id="r3" value="radio"/>
<label for="radio3">1100-1500</label></li>
<li><input type="radio" name="radio" id="r4" value="radio4"/>
<label for="radio4">1600-2000</label></li>
<li><input type="radio" name="radio" id="r5" value="radio5"/>
<label for="radio5">2100-2500</label></li>
</ul>
</form>
And this php and mysql code
<?php
$results1 = mysqli_query($db,"SELECT product_code, product_name, product_img_name, price FROM products where price> 500 ORDER BY id ASC");
if($results1){
$products_item = '<ul class="products">';
while($obj = $results1->fetch_object())
{
$products_item .= <<<EOT
<li class="product">
<form method="post" action="cart_update.php">
<div class="product-content"><h3>{$obj->product_name}</h3>
<div class="product-thumb"><img height="250px" src="../../img/{$obj->product_img_name}"></div>
<div class="product-info">
Price {$currency}{$obj->price}
<fieldset>
<label>
<span>size</span>
<select name="product_color">
<option value="Black">Medium</option>
<option value="Silver">Small</option>
</select>
</label>
<label>
<span>Quantity</span>
<input type="text" size="2" maxlength="2" name="product_qty" value="1" />
</label>
</fieldset>
<input type="hidden" name="product_code" value="{$obj->product_code}" />
<input type="hidden" name="type" value="add" />
<input type="hidden" name="return_url" value="{$current_url}" />
<div align="center"><button type="submit" class="add_to_cart">Add</button></div>
</div></div>
</form>
</li>
EOT;
}
}
?>
</div>