javascript - 如何从 HTML 中获取选定的值并在 js 或 php 中处理它？

Question

我创建了一系列事件，现在我有一个按位置下拉的过滤器。如何获取下拉列表中选择的值并在 js 或 php 中处理？哪个会更好，所以它会显示来自该位置的事件，而不是所有事件。我有不同的文件，一个用于显示事件（events.js 和 events.php），另一个文件（filterevents.js 和 filter events.php）这是我要处理的过滤。

HTML

         <div class="events">

             <form method="POST" id="eventForm"> 
                 Filter By Location<br/>
                <select name="Locations">
                    <option value="Leeds">Leeds</option>
                    <option value="Newcastle">Newcastle</option>
                    <option value="London">London</option>
                </select>
                 <input type="submit" name="submit" value="Search"/>
             </form>

                    <div class="eventname"><!--obj.eventname--></div>
                    <div class="date"><!--obj.date--></div>
                    <div class="time"><!--obj.time--></div>
                    <div class="location"><!--obj.location--></div>

                <p id="error" class="errormessage"></p>
                <p id="allevents" class="postmessage"></p>
        </div>

事件.php

<?php

require_once('checklog.php');
require_once("db_connect.php");
require_once("functions.php");

session_start();

// Print out existing events
$query = "SELECT eventname, date, time, location FROM events ORDER BY eventname";
$result = mysqli_query($db_server, $query);
if (!$result)
    die("Database access failed: " . mysqli_error($db_server));
while ($row = mysqli_fetch_array($result)) {

    $events[] = $row; 

}

mysqli_free_result($result);

require_once("db_close.php");

echo json_encode($events);

?>

事件.js

$(document).ready(function() {

     var events = document.getElementById("allevents").value; 

        // Call Ajax for existing comments
        $.ajax({
        type: 'GET',
        url: 'events.php',
        success: function(result) {
            var arr = JSON.parse(result);

                for(var i = 0; i < arr.length; i++) {
                var obj = arr[i];   

                var output = document.getElementById("allevents");  

                output.innerHTML += '<div class="comment-container"><div class="eventname">'+obj.eventname+'</div><div class="date">'+obj.date+'</div><div class="time">'+obj.time+'</div><div class="location">'+obj.location+'</div></div>';

            }
        }
    });

过滤事件.php

<?php

require_once('checklog.php');
require_once("db_connect.php");
require_once("functions.php");

This is where I want to filter but not sure how to do it.

?>

过滤事件.js

// When post button is clicked
$(document).ready(function() {
    var forum = $("#eventForm");
    $("#eventForm").on('submit', function(event) {
        event.preventDefault();

        var events = new FormData(this); 

    if (events) {

    // Call Ajax for new comment
    $.ajax({
        type: 'POST',
        url: 'filterevents.php',
        data: events, 
        processData: false, 
        contentType: false,
        success: function(response) {
                if(response == "Success")  
                {
                  document.getElementById("comment").innerHTML = response;
                } else { 
                    document.getElementById("error").innerHTML = response;
                } 
            } 
        });
    } else { 
        document.getElementById("error").innerHTML = "Please Select A Location";
    }        
    return false;
    });

}); 

标签： javascriptphphtmlfiltering