PHP jQuery check if input box is empty

Question

I've got a search box that uses PHP to search a film database(to query the database for film titles and get the information from the input box using $_POST) and jQuery (to make it an instant search). I want it so that when the input box has nothing in it, no film titles show up (It currently shows up).

Here is the form:

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

    <input type="text" autocomplete="off" name="search" placeholder="Search for movies or genres..." onkeyup="searchq();" />
    <input type="submit" value=">>" />
    <div id="outp">

    </div>

</form>

Here is the jQuery:

function searchq(){
    var searchTxt = $("input[name='search']").val();

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

And here is search.php:

<?php
include('db_con.php');

$out = '';

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

    $q = mysqli_query($con, "SELECT id, title FROM films WHERE title LIKE '%$searchq%'") or die("Could not search!");
    $c = mysqli_num_rows($q); 

    if ($c == 0){
        $out = '<p>There was no search results!</p>';
    } else {
        while($line = mysqli_fetch_array($q)){
            $filmt = $line['title'];
            $id = $line['id'];

            $out .= '<div> <a href="list.php?id=' . $id . '">'.$filmt. '</a></div>';
        }
    }
}

echo($out);

?>

What I have tried to make no movie titles appear when nothing is in the input box:

Adding a "Clear" button - this worked but it's too much hassle having to click "Clear" every time.
how to check if input field is empty - did not work
Check if inputs are empty using jQuery - did not work

Anyway of getting around this?

Thanks.

taxicala · Accepted Answer · 2015-08-23 23:04:16Z

3

You should trim the value and check if it's an empty string before triggering the ajax request:

function searchq(){
    var searchTxt = $("input[name='search']").val();
    if (searchTxt.trim() === "") {
         $("#outp").html("<p>Please enter a query in the search input.</p>");  //Or any other message :)
         return;
    }
    $.post("search.php", {searchVal: searchTxt}, function(out) {
        $("#outp").html(out);
    })
}

And also add a check in the PHP script as well in case the form is submitted without the js function:

<?php
include('db_con.php');

$out = '';
$seachVal = isset($_POST['searchVal']) ? $_POST['searchVal'] : false;

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

    $q = mysqli_query($con, "SELECT id, title FROM films WHERE title LIKE '%$searchq%'") or die("Could not search!");
    $c = mysqli_num_rows($q); 

    if ($c == 0){
        $out = '<p>There was no search results!</p>';
    } else {
        while($line = mysqli_fetch_array($q)){
            $filmt = $line['title'];
            $id = $line['id'];

            $out .= '<div> <a href="list.php?id=' . $id . '">'.$filmt. '</a></div>';
        }
    }
}

echo($out);

?>

edited Aug 23, 2015 at 23:04

answered Aug 23, 2015 at 22:39

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rharper Over a year ago

Thanks - however, instead of showing no films, this modification shows the films of the most recent search?

taxicala Over a year ago

True, let me edit my answer, you should replace the latest search results with a message if the string is empty.

rharper Over a year ago

Thanks! Works great :)

Collectives™ on Stack Overflow

PHP jQuery check if input box is empty

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related