jquery price slider not connect with php code

[Hannah123456]

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?

 

//Javascript

 

<script>

  $(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 ) );

  });

  </script>

 

 

//THE PHP CODE

 

<?php

 

require_once 'config.php';

include 'header.php';

include('db.php');

include('database.php');

 

 

if($_POST['amount']){

$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 = '';

}

}

 

?>

 

 

// THE FORM 

 

<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>

    <br><br>

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

    <br><br>

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

    <br><br>

    

    <?php echo $HTML?>

</div>

 

[joel24]

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

 

add in a 

var_dump($min,$max,$_POST); 
exit; 

 and let us know the response

[Hannah123456]

I don't think it is set, no how would you go about doing this?

[Psycho]

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.