PHP + MYSQL instant search with radio button filtering

Question

I have with the help of this guide https://www.youtube.com/watch?v=_AqM9U3mi9A created a working search form that displays instant search results (without having to press submit button) with PHP and MYSQL.

Then I wanted to filter the search results depending on what radio button is pressed. Now I also got this to work (partly with the help of this guide https://www.youtube.com/watch?v=DVS4qoB98U8) but ONLY when pressing submit on my search form. It does not work with instant search results for some reason, and that is my problem.

index.php (form):

<form class="form-custom" role="search" action="index.php" method="POST">
   <div class="form-group">
      <label for="all" class="radio-btn">
         <input id="all" class="radio-custom" type="radio" name="searchfilter" value="all" checked="checked"> ALL
      </label>
      <label for="sports" class="radio-btn">
         <input id="sports" class="radio-custom" type="radio" name="searchfilter" value="sports"> SPORTS
      </label>
      <label for="e-sports" class="radio-btn">
         <input id="e-sports" class="radio-custom" type="radio" name="searchfilter" value="e-sports"> E-SPORTS
      </label>
      <label for="show-business" class="radio-btn">
         <input id="show-business" class="radio-custom" type="radio" name="searchfilter" value="show-business"> SHOW BUSINESS
      </label>
   </div>
      <div class="form-group">
      <input type="text" name="search" autocomplete="off" class="form-control form-control-custom" placeholder="Search..." onkeyup="searchq();">
      <button type="submit" name="submit" value="" class="btn btn-default btn-form-custom">Submit</button>
      </div>
</form>

<div class="test" id="output">

<!-- this is where instant search results are supposed to appear -->

</div>

index.php (jquery - requiered for instant search results to work):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function searchq(){
var searchTxt = $("input[name='search']").val();

$.post("search.php",{searchVal: searchTxt}, function(output){
        $("#output").html(output);

});
}
</script>

search.php (PHP code):

<?php

include_once("connect.php");

$output = '';


if (isset($_POST['searchVal']) && isset($_POST['searchfilter']) && trim($_POST['searchVal']) != '' && strlen('searchVal') > 3 ){

$searchq = $_POST['searchVal'];
$searchq = preg_replace("#[^0-9a-z]#i","",$searchq);

if($_POST['searchfilter'] == "all") {

    $sqlCommand = "(SELECT  * FROM sports WHERE Title LIKE '%$searchq%') UNION (SELECT  * FROM e_sports WHERE Title LIKE '%$searchq%') UNION (SELECT  * FROM show_business WHERE Title LIKE '%$searchq%')";

} else if($_POST['searchfilter'] == "sports") {

        $sqlCommand = "SELECT * FROM sports WHERE Title LIKE '%$searchq%'";

} else if($_POST['searchfilter'] == "e-sports") {

        $sqlCommand = "SELECT  * FROM e_sports WHERE Title LIKE '%$searchq%'";

} else if($_POST['searchfilter'] == "show-business") {

        $sqlCommand = "SELECT  * FROM show_business WHERE Title LIKE '%$searchq%'";

} 

$query = mysql_query($sqlCommand) or die(mysql_error());
$count = mysql_num_rows($query);

if($count == 0){
     $output .= '<p class="p-nof">No results found</p>';
    }else{
    $output .= '<ul ="dropdown">';
    $output .= '<p>Search results: '.$count.'</p>';
        while($row = mysql_fetch_array($query)){
        $title = $row['Title'];
        $url = $row['url'];
        $id = $row['id'];

            $output .= '<a class="searchresult" href="'.$url.'"><li> '.$title.'</li></a>';
       }
    $output .= '</ul>';
   }
}
echo($output); 

?>

Thanks in advance for any help!

EDIT:

I changed the javascript to the following:

<script type="text/javascript">
function searchq(){
var searchTxt = $("input[name='search']").val();
var searchFilter = $("input[name='searchfilter']").val();

$.post("search.php",{searchVal: searchTxt, searchfilterVal: searchFilter}, function(output){
    $("#output").html(output);

});
}
</script>

With this change the instant search results are working like before but the radio button filtering is not working. It seems that it's only using the data from the first radio input and ignoring the rest. When I click the other radio buttons it continues to use the data from the one listed first in the form. It does not change as I click.

I still need help with this! Thanks in advance!

*"but ONLY when pressing submit on my search form"* - There isn't a submit button/input in what you posted. — Funk Forty Niner, Dec 30 '15 at 14:32
You're passing through the value of searchTxt to your JS but not the value of searchFilter - you'd need to amend your JS. — karlbarbour, Dec 30 '15 at 14:35
Please [stop using `mysql_*` functions](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php). [These extensions](http://php.net/manual/en/migration70.removed-exts-sapis.php) have been removed in PHP 7. Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [PDO](http://php.net/manual/en/pdo.prepared-statements.php) and [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php) and consider using PDO, [it's really pretty easy](http://jayblanchard.net/demystifying_php_pdo.html). — Jay Blanchard, Dec 30 '15 at 14:40
[Your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) — Jay Blanchard, Dec 30 '15 at 14:40
@Fred-ii- Sorry, there's supposed to be a button there, my bad. — Linus Aronsson, Dec 30 '15 at 14:52
could you edit your question to include it where you are using it? and/or see the answer given below. — Funk Forty Niner, Dec 30 '15 at 14:55
use a conditional statement based on the named submit input, if that's what the question is about. — Funk Forty Niner, Dec 30 '15 at 15:06
The question was if I can get filtered search results to show up instantly on search (without pressing submit button). With the help of @eXplicit I managed to make the search results appear instantly, however the filtering is still not working. — Linus Aronsson, Dec 30 '15 at 15:36

karlbarbour · Answer 1 · 2015-12-30T15:12:41.250

1

Adjust your JS to post the value of searchFilter

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function searchq(){
var searchTxt = $("input[name='search']").val();
var searchFilter = $("input[name='searchfilter']").val();

$.post("search.php",{searchVal: searchTxt, searchFilter: searchfilter}, function(output){
        $("#output").html(output);

});
}
</script>

edited Dec 30 '15 at 15:12

answered Dec 30 '15 at 14:43

karlbarbour

362
2
11

Thanks for the reply. I made the changes that you suggested but it still doesn't work. – Linus Aronsson Dec 30 '15 at 15:00
1

I changed it a bit, I added a 2nd variable (var searchFilter = $("input[name='searchfilter']").val();) and then I used what you suggested in the following way: $.post("search.php",{searchVal: searchTxt, searchfilterVal: searchFilter}, function(output){ $("#output").html(output); This made the instant search results show up which is progress, but the filtering doesn't work. – Linus Aronsson Dec 30 '15 at 15:11
Apologies - I did this in my fiddle, but forgot to paste the line. Glad I could point you in the right direction. – karlbarbour Dec 30 '15 at 15:13

PHP + MYSQL instant search with radio button filtering

1 Answers1