Question

I’m trying to do a Jquery Ajax search with multiple conditions, and this is my first time. I did some research and found ways to send data to a php file, however it’s only with one variable. I’m not sure how to implement all of my 6 variables into data: data.

here they are:

var FromDate
var ToDate
var MusicStyles
var Locations
var FromPrice
var ToPrice

Now here is where I got stuck, I should do a post with some data. When I have multiple variavbles, can I do data: dataFromDate, dataToDate, dataMusicStyles,?

$("#SearchButton").click(function() {

var dataFromDate            = 'dataFromDate='+ FromDate;
var dataToDate              = 'dataToDate='+ ToDate;
var dataMusicStyles         = 'dataMusicStyles='+ MusicStyles;
var dataLocations           = 'dataLocations='+ Locations;
var dataFromPrice           = 'dataFromPrice='+ FromPrice;
var dataToPrice             = 'dataToPrice='+ ToPrice;


            $.ajax({
                type: "POST",
                url: "do_search.php",
                data: dataFromDate, dataToDate, dataMusicStyles, dataLocations, dataFromPrice, dataToPrice,
                beforeSend: function(html) { // this happens before actual call
                    $("#results").html('');
                    $("#searchresults").show();
                    $(".word").html(searchString);
               },
               success: function(html){ // this happens after we get results
                    $("#results").show();
                    $("#results").append(html);
              }
            });   
});

Where the MySQL would look like this:

<?php
//if we got something through $_POST
if (isset($_POST['dataFromDate'])) {
    include('db.php');
    $db = new db();
    // never trust what user wrote! We must ALWAYS sanitize user input
    $word = mysql_real_escape_string($_POST['search']);
    $word = htmlentities($word);
    // build your search query to the database

    $sql = "SELECT
    events.ID,
    events.EVENT_NAME,
    events.start_datetime,
    events.end_datetime,
    events.VENUE_LOCATION,
    events.ENTRANCE_PRICE, 
    venues.VENUE_NAME,
    GROUP_CONCAT(music_styles.MUSIC_STYLE_NAME) AS MUSIC_STYLE_NAME
    FROM events
    INNER JOIN venues 
    ON events.VENUE_LOCATION = venues.ID
    INNER JOIN events_music_styles
    ON events.ID = events_music_styles.event_id
    INNER JOIN music_styles
    ON events_music_styles.music_style_id = music_styles.id
    WHERE start_datetime >= '$phpFromDate'
    AND end_datetime <= '$phpToDate' 
    AND ENTRANCE_PRICE >= '$phpFromPrice'
    AND ENTRANCE_PRICE <= '$phpToPrice' 
    GROUP BY events.ID";

    // get results
    $row = $db->select_list($sql);
    if(count($row)) {
        $end_result = '';
        foreach($row as $r) {
            $result         = $r['title'];
            // we will use this to bold the search word in result
            $bold           = '<span class="found">' . $word . '</span>';   
            $end_result     .= '<li>' . str_ireplace($word, $bold, $result) . '</li>';           
        }
        echo $end_result;
    } else {
        echo '<li>No results found</li>';
    }
}
?>

I am 100% certain that it doesn’t work like this, but I think I got it almost right. I would love it if someone could at least please let me know what I could do to fix the code.

Thanks!

Answer 1

You send it as an object, like so:

$.ajax({
    type: "POST",
    url: "do_search.php",
    data: {dataFromDate    : FromDate,
           dataToDate      : ToDate,
           dataMusicStyles : MusicStyles,
           dataLocations   : Locations,
           dataFromPrice   : FromPrice,
           dataToPrice     : ToPrice
    },
    beforeSend: function(html) { // this happens before actual call
        $("#results").html('');
        $("#searchresults").show();
        $(".word").html(searchString);
    },
    success: function(html) { // this happens after we get results
        $("#results").show();
        $("#results").append(html);
    }
});​

Where the firs value is the key, and the second is the value, so {key: value} would be accessed on the server as $_POST['key'], which your values would be accessed the way you seem to want :

$_POST['dataFromDate']

Also, you don’t need all those variables at the start, just use them directly in the object.