Jump to content

jquery price slider not connect with php code

Recommended Posts

The price range slider is not connecting up with the php pdo code when you click the submit button the recipes within that price range should be displayed but nothing is returned can anyone help?





  $(function() {

    $( "#slider-range" ).slider({

      range: true,

      min: 0,

      max: 10,

      values: [ 0, 10 ],

      slide: function( event, ui ) {

        $( "#amount" ).val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ] );



    $( "#amount" ).val( "£" + $( "#slider-range" ).slider( "values", 0 ) +

      " - £" + $( "#slider-range" ).slider( "values", 1 ) );









require_once 'config.php';

include 'header.php';






$values = $_POST['amount'];


$values = str_replace(array(' ', '£'), '', $_POST['amount']);

list($min, $max) = explode(' ', $values);

$sql = "SELECT `recipe_name`, `recipe_price`,  `Image` 

        FROM `recipe` 

        WHERE `recipe_price` BETWEEN :min AND :max";

$stmt = $DB->prepare($sql);

$stmt->execute(array(':min' => $min, ':max' => $max));

$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);

if (count($rows) > 0) {

    foreach ($rows as $row) {

        // do loop stuff


} else {

    $min = 0;

    $max = 10;

    $HTML = '';









<form action="" method="post" id="amount">

<div style="margin-left:20px">

    <label for="amount">Price range:</label>

    <input type="text" id="amount" name="amount" style="border:0; color:#f6931f; font-weight:bold;" readonly>


    <div id="slider-range" style="width:50%;"></div>


    <input type="submit" value="Find" />



    <?php echo $HTML?>



Share this post

Link to post
Share on other sites

is your min/max being set in the sql query?


add in a 


 and let us know the response

Share this post

Link to post
Share on other sites

When you have separate technologies (PHP & JavaScript) working together you need to test each one independently to find the problem. I would start with the PHP page. Add a line of code to output the value that should be set from the JavaScript. If the value isn't there, then you know it isn't being set by the JavaScript and you need to look in that code for the problem. If the value is there, then you know the problem is within the PHP code that processes the value.


Also, it is a bad idea to put non-numeric content in a field intended for numeric content. Specifically, you are putting the '£' character into the input field with javascript and then stripping it out in the PHP. Just put the '£' as text to the left of the field. Inserting/stripping characters, especially with two different parts of code it just adding complexity for the sake of complexity with no real value.


Looking further, the PHP code is flawed


$values = str_replace(array(' ', '£'), '', $_POST['amount']);
list($min, $max) = explode(' ', $values);


That first line is replacing any spaces or pound symbols with an empty string. But,then the next line is trying to explode on the spaces character - but there won't be any. Why make this difficult. Just create two fields to hold the min/max values (without any extraneous characters) and use those in the POST fields. If you want to display the values to the user, you can still do that without adding the additional complexity you have now.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.