Jquery form $_POST php empty? - My serialize seems to be failing

Question

I've been struggling with this one for a while this week.

I'm using Jquery to submit a forms data to the same page and pull in a php file. However the $_POST seems to always be empty. After some search I found that I need to serialize the data of the form through the Jquery first, but still no luck. Can anyone explain to me what I'm doing wrong here please? - I've included the form, jquery and the php

Form

<form action="" method="POST" id="searcher" name="searcher">

        <div class="customsearchul">
        <ul>
        <li><h4>Area:</h4></li>
        <li>All of London<input type="radio" name="area" value="london" checked="checked" /></li>
        <li>North<input type="radio" name="area" value="north" /></li>
        <li>East<input type="radio" name="area" value="east" /> </li>   
        <li>South<input type="radio" name="area" value="south" /></li>
        <li>West<input type="radio" name="area" value="west" /></li>
        <li>Central<input type="radio" name="area" value="central" /></li>
        </ul>  
        </div>

        <div class="customsearchul">
        <ul>
        <li><h4>Music:</h4></li>
        <li>House<input type="checkbox" name="music[]" value="house" /></li>
        <li>Techno<input type="checkbox" name="music[]" value="techno" /></li>
        <li>Trance<input type="checkbox" name="music[]" value="trance" /></li>
        <li>Electronica<input type="checkbox" name="music[]" value="electronica" /></li>  
        <li>Drum and Bass<input type="checkbox" name="music[]" value="drum-and-bass" /></li>
        <li>Garage<input type="checkbox" name="music[]" value="garage" /></li>
        <li>Dubstep<input type="checkbox" name="music[]" value="dubstep" /></li>
        <li>Trap<input type="checkbox" name="music[]" value="trap" /></li>
         </div> 
        </ul> 

        <div class="customsearchul" style="margin-top: 34px;">
        <ul>
        <li>Hip-Hop<input type="checkbox" name="music[]" value="hip-hop" /></li>
        <li>R'n'B<input type="checkbox" name="music[]" value="rnb" /></li>
        <li>Rock<input type="checkbox" name="music[]" value="rock" /></li>
        <li>Indie<input type="checkbox" name="music[]" value="indie" /></li>
        <li>Reggae<input type="checkbox" name="music[]" value="reggae" /></li>
        <li>Retro 80's/90's<input type="checkbox" name="music[]" value="retro" /></li>
        <li>Party Bangers<input type="checkbox" name="music[]" value="party-bangers" /></li>
        <li>Chart Hits<input type="checkbox" name="music[]" value="chart-hits" /></li>
        </ul>  
        </div>

        <div class="customsearchul">
        <ul>
        <li><h4>Search Type:</h4></li>
        <!--<li>Everything<input type="checkbox" name="occasion[]" value="debauchery" /></li> -->
        <li>Nightclubs<input type="checkbox" name="occasion[]" value="nightclub" checked="checked" /></li>
        <li>Events & Tickets<input type="checkbox" name="occasion[]" value="event" checked="checked" /> </li>   
        <li>Live Venues<input type="checkbox" name="occasion[]" value="live-venue" checked="checked" /></li>
        <li>Artist Interviews<input type="checkbox" name="occasion[]" value="artist" checked="checked" /></li>
        <li>Gay & Lesbian<input type="checkbox" name="occasiongay[]" value="gay-lesbian"/></li>
        <li>£££ Big Spender<input type="checkbox" name="occasionmoney[]" value="big-spender"/></li>
        <li>££ Keep it Average<input type="checkbox" name="occasionmoney[]" value="keep-it-average"/></li>
        <li>£ Cheap As Chips<input type="checkbox" name="occasionmoney[]" value="cheap-as-chips"/></li>
        </ul>
        </div>
        <center><input type="image" id="performsearch" src="http://www.*******.com/wp-content/themes/bigformat/images/calltoactionindexbutton.jpg">
        </center>

Jquery

<script type="text/javascript">
jQuery(document).ready(function($){

    $("#performsearch").click(function(){
        $("#displayresults").empty();
        $( "#displayresults" ).html('<center><img src="/wp-content/themes/bigformat/images/ajax-loader.gif"></center>').load( '/wp-content/themes/bigformat/template-home-search.php');

        $("searcher").submit(function(){
    var querystring = $(this).serialize();});
        return false;

    });

});
</script>

PHP

// Get Form Data For search
$locationarea = $_POST['area'];
$music = $_POST['music'];
$occasion = $_POST['occasion'];
$occasiongay = $_POST['occasiongay'];
$occasionmoney = $_POST['occasionmoney'];

echo 'User has selected';
print_r($_POST);
var_dump($_POST);
echo '<br><br>';

Answer 1

$("searcher") does not do anything in your case... You are using the Element Selector which is looking for an <searcher> element. You should use the ID Selector.

Change $("searcher") into $("#searcher").

To actually post your form use something like:

$("searcher").submit(function(event) {
    // Prevent form from submitting the normal way
    event.preventDefault();

    $("#displayresults").html('<center><img src="/wp-content/themes/xxx/images/ajax-loader.gif"></center>').load( '/wp-content/themes/xxx/template-home-search.php');

    // Get URL from Form action attribute instead of window.location
    $.post($(this).attr("action"), $(this).serialize());
}