Wordpress custom field select box search "at least" value

Question

I have two custom post types, ads and bedrooms.

I have made a custom search form with a select box like so:

<select name="bedrooms" id="bedrooms>
    <option value="1" selected="selected">1 bed+</option>
    <option value="2">2 beds+</option>
    <option value="3">3 beds+</option>
</select>

How can I link it so that when a user searches for 2 beds+ it will show all ads with 2 bedrooms or more?

Can you post your php code for the search? And, specifically, what is the field name that contains the number of beds? — cssyphus, Feb 06 '14 at 16:53
hi gibberish, the field name is called "cp_bedrooms" ,ill post the code this evening when i get home, the strange thing is if i put — user3280554, Feb 06 '14 at 17:02

score 0 · Answer 1 · edited May 23 '17 at 12:21

First, you want to extract the (minimum) number of beds the user has selected. To do that, you need a bit of javascript (or jQuery, which is what I recommend).

Here is code that watches for the select element's value to change. Probably you won't use that event, but the code shows you how to read the control's value (and how to properly use the selected attribute):

jsFiddle Demo

HTML:

<select name="bedrooms" id="bedrooms">
    <option value="0" selected>Choose One:</option>
    <option value="1">1 bed+</option>
    <option value="2">2 beds+</option>
    <option value="3">3 beds+</option>
</select>
<div id="resultsDiv"></div>

javascript/jQuery:

$('#bedrooms').change(function() {
    var beds = $(this).val();
    alert('Minimum beds: ' + beds);
});

Once you have the (minimum) number of beds saved into a variable, you can use AJAX to send a request to the server to perform a search and return the results:

$.ajax({
    type: "POST",
    url: "somephpfilename.php",
    data: 'num_beds=' + beds,
    success: function(recd){
        $('#resultsDiv').html(recd);
    }
});

The above will send the contents of the variable beds over to the PHP side, re-naming it num_beds. I changed the var name so that you can see how the names match up. On the PHP side, retrieve the number of beds as: $_POST['num_beds']

You can then do a mysql search and construct some HTML code inside a variable. When done, just echo out that variable. (Note that I am using $out .= "more stuff"; to append to the variable contents, and then echo the variable when finished.

PHP: somephpfilename.php

$min_beds = $_POST['num_beds'];
$query = "SELECT * IN `yourtablename` WHERE `cp_bedrooms` > '$min_beds' ORDER BY `cp_bedrooms`";
$results = mysql_query($query) or die(mysql_error());

$out = '
    <table id="foundApts">
        <tr>
            <th>Num Beds</th>
            <th>Address</th>
            <th>Contact Phone</th>
            <th>Rent</th>
        </tr>
    ';

while ($row = mysql_fetch_assoc($results){
    $out .= '
        <tr>
            <td>' .$row['cp_bedrooms']. '</td>
            <td>' .$row['address_field_name']. '</td>
            <td>' .$row['phonenum_field_name']. '</td>
            <td>' .$row['rentprice_field_name']. '</td>
        </tr>
    ';
}

$out .= '</table>';

echo $out;

What is echoed out by PHP (that is, the contents of the $out variable -- the HTML constructed on the PHP side) is received inside the AJAX success: function in a variable called recd. Just write that variable into the results div and you will see the fully constructed table of results. Note that you must do this inside the success: function. You will find that the recd variable does not exist outside this function.

Here is a non-working link to a jsFiddle with everything put together. Note that it is non-working because jsFiddles cannot do AJAX and there is no place to put the PHP (I just added the PHP inside a comment, but it should be saved into a file on the PHP file system). Just observe how the code is constructed.

jsFiddle Code Sample

Here are some additional notes regarding AJAX/PHP:

How to use jQuery in your code (you only need to include the jQuery library, as shown in One:)

Simple intro to AJAX

Wordpress custom field select box search "at least" value

1 Answers1