Q:

Passing form element to javascript and then running jquery/ajax to pull from DB..phew

I am trying to take a zip code from my form and then submit it to javascript/jquery that will then pull data from the database with that zip code.  I copy pasted code from w3schools and changed a few names, also referred to some SO code to take in the form element from a submit button click with an ID.. 
The issue is that the returned stuff from search.php page is not being displayed in the  tag that has the eventsReturned ID.  Also, I am not sure that the searchEvents() method is receiving the zip?
Here is what I have so far.. all help is appreciated as usual:
Javascript in index.php page --
    <script>
    $(document).ready(function() {
        $('#searchEventsBtn').click(function() {
            searchEvents($('#zip').val());
        });
    });

    $(function searchEvents(zip) {
        if (zip == null) {
            document.getElementById("eventsReturned").innerHTML = "No events found in that zip code..";
            return;
        } else {
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("eventsReturned").innerHTML = this.responseText;
                }
            };
            xmlhttp.open("POST","search.php",true);
            xmlhttp.send();
        }
    });
</script>

index.php page --
<form name="searchEvents" method="post">
            <input type="text" class="form-control" placeholder="Enter a zipcode" name="zip" id='zip'>
            <a class="btn btn-default" style='border:1px solid #EC811C;' role="button" data-toggle="collapse" href="#advancedSearch" aria-expanded="false" aria-controls="collapseExample">
              Advanced Options
            </a>
    </div>
<div class="col-md-4"></div>
</div>          
<div class="collapse" id="advancedSearch">          
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <select class="form-control" name="category">
                <option>All Categories</option>
                <option>Bar/Nightclub</option>
                <option>Local Public Event</option>
                <option>Private Event/Invite Only</option>
                <option>Restaurant/Dining</option>
                <option>Sporting/Outdoor Activity</option>
            </select>
        </div>
        <div class="col-md-4"></div>
    </div>
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-2">
            <div class="form-group">
                <div class="input-group date" id="startDate">
                    <input type="text" class="form-control" name="startDate" placeholder="Start End"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <div class="input-group date" id="endDate">
                    <input type="text" class="form-control" name="endDate" placeholder="End Date"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class="col-md-4"></div>
    </div>
</div>
<script>
    $(function () {
        $('#startDate').datetimepicker({
            format: 'YYYY-MM-DD'
        });

        $('#endDate').datetimepicker({
            format: 'YYYY-MM-DD'
        });
    });
</script>
    <br>
<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4">
        <button type="submit" id='searchEventsBtn' name="submit" class="btn btn-primary btn-lg btn-block">Search</button>
    </div>
    <div class="col-md-4"></div>
</div>
</form>

search.php page called by javascript/jquery --
    <?php 
if($_SERVER["REQUEST_METHOD"] == "POST"){
    if ($_POST["zip"] == ""){
        echo "<script>
        alert('Zip code must be entered.');
        </script>";
    } 
    else if ($_POST["zip"] < 10000 || $_POST["zip"] > 99999){
        echo "<script>
        alert('Zip code must be a valid number.');
        </script>";
    }
    else {
        $zip = $_POST["zip"]; //Outside for tab implementation later.
        $category = $_POST["category"];
        $startDate = $_POST["startDate"];
        $endDate = $_POST["endDate"];
    }

    // Check connection
    if ($db->connect_error) {
         die("Connection failed: " . $conn->connect_error);
    }
}

//EVENTS IN ZIP CODE #####
$sql = "SELECT id, name, DATE_FORMAT(date, '%W, %b %e %Y %l:%i %p') date, date orderByDate, shortDesc, summary, street, city, state, zip, private 
        FROM events 
        WHERE zip = ".$zip." 
        AND approved = 1 
        AND date > sysdate() 
        AND NOT EXISTS (SELECT 1 FROM signup WHERE signup.eid = events.id and signup.customer= ".$userId.")";

//Add in cateogry filtering to sql query
if ($category == "All Categories"){
    //do nothing, show all categories
}
else if ($category == "Bar/Nightclub"){
    $sql = $sql." AND category = 'Bar/Nightclub'";
}
else if ($category == "Local Public Event"){
    $sql = $sql." AND category = 'Local Public Event'";
}
else if ($category == "Private Event/Invite Only"){
    $sql = $sql." AND category = 'Private Event/Invite Only'";
}
else if ($category == "Restaurant/Dining"){
    $sql = $sql." AND category = 'Restaurant/Dining'";
}
else if ($category == "Sporting/Outdoor Activity"){
    $sql = $sql." AND category = 'Sporting/Outdoor Activity'";
}

//Add Date filtering
//If start and end dates are not null, then you have a date range to search for
if ((!$startDate == null) && (!$endDate == null)){
    $sql = $sql." AND date BETWEEN '".$startDate." 00:00:00' AND '".$endDate." 23:59:59'";
}
//start date is set without an end date
else if ((!$startDate == null) && ($endDate == null)){
    $sql = $sql." AND date > '".$startDate." 00:00:00'";
}
//start date is null but have and end date
else if (($startDate == null) && ($endDate != null)){
    $sql = $sql." AND date < '".$endDate." 23:59:59'";
}
//start and end dates are null
else if (($startDate == null) && ($endDate == null)){
    //dont add a date filter, do nothing
}

//Add the end part of the sql
$sql = $sql." ORDER BY orderByDate asc";

//Run the query
$result = mysqli_query($db,$sql);

//if there are records returned..
if ($result->num_rows > 0) {

    echo "<h1 class='text-center'>Events in ".$zip."</h1><hr>";

    //count the number of panels put into the results, this is based on col-md-4 for each panel (3 panels, 4 col width each)
    $counter = 0;

    while($row = $result->fetch_assoc()) {

        if ($counter == 0){
            echo "<div class='row'>";
        }
        echo "
            <div class='col-md-4'>
                <div class='panel panel-default'>
                    <div class='panel-body'>
                        <div class='media'>
                          <div class='media-left media-top'>
                            <a href='#'>
                              <img class='media-object' src='...' alt='...'>
                            </a>
                          </div>
                          <div class='media-body'>
                            <h4 class='media-heading'><b><a href='eventInfo.php?eventId=".$row["id"]."'>".$row["name"]."</a></b></h4>";
                            if ($row["private"] == 1){
                                echo "Private Address";
                            } else {
                             echo $row["street"].", ".$row["city"].", ".$row["state"]." ".$row["zip"];
                            } 
                            echo "
                          </div>
                        </div>
                        <br>
                        <p class='text-left'><b>Date and Time:  </b>".$row["date"]."</p>
                        <p class='text-left'><b>Description:  </b>".$row["shortDesc"]."</p>
                        <form method='post' action='u_signup.php' name='signup'>
                            <div class='text-center'>
                            <button class='btn btn-primary' type='submit' name='submit' value='".$row["id"]."'>Signup For Event</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        ";
        if ($counter == 2){
            //reset row counter/setter
            $counter = 0;
            echo "</div>";
        } else {
            $counter++;
        }
    }
}
else {
    if (isset($zip)){
        echo "<h1 class='text-center'>Events in ".$zip."</h1><hr>";
        echo "<p class='text-center'>No events for that search critera.  Consider <a href='create.php'>creating an event</a> in your area!</p>";
    }
}

?>

A:

Ok it seems you are new to this kind of thing so I am going to try and explain a couple of things. First off, I see you have jquery but trying to do things with pure javascript because you probably copied it.
Jquery can make things a lot easier and cross browser friendly, that is why we use it. So if you want to send data to the server rather use Jquery, like this:
$.post('search.php', {'my_zip_code': zip}, function(data, result, xhr){
    $("#eventsReturned").html(data); // notice how I use jquery instead of getElementById
});

Ok so now that we got that out of the way. It seems like the main problem is you not being able to debug code properly. It is really easy, so here is how you do it.
If you use Google Chrome to test with, you will notice in the developer tools (F12) there is a console tab. If you want to display something in there you can use:
console.log('anything');

So if you want to let say see what was returned from the server (search.php) you would just use this in the code I gave you above:
console.log(data); // data is what was returned from the jquery ajax post

That will display the variable in the console and you can check it out and see what was returned.
Now, if you want to see if your server received the data in the first place it is also pretty easy to do. Again in your Google Chrome developer tools look for the tab called network. Now in your network tab, if you sent the server an ajax request it will be listed there, normally with the name of the page you requested, like search.php.
When you click on this request it should show you what was sent in the first place, but also there should be a tab with responses... now if you see nothing in there, you can go to your php file and type in the following:
var_dump($_POST);

That will show you everything that was posted to the file, including the zip code (if it was ever sent). That output should be inside the response tab like I mentioned above.
Knowing how to debug code and find problems is the best way forward, not just some solution someone gives you here.
Goodluck

