Du kan använda en kombination av jQuery och AJAX för att göra detta. Mycket enklare än det låter. För att se att detta är rätt svar för dig, se bara detta exempel .
I exemplet nedan finns det två .PHP-filer:test86a.php och test86b.php.
Den första filen, 86A, har en enkel valruta (rullgardinsmeny) och en del jQuery-kod som ser till att valrutan ändras. För att trigga jQuery-koden kan du använda jQuery .blur() funktion för att se till att användaren lämnar datumfältet, eller så kan du använda jQueryUI API:
$('#date_start').datepicker({
onSelect: function(dateText, instance) {
// Split date_finish into 3 input fields
var arrSplit = dateText.split("-");
$('#date_start-y').val(arrSplit[0]);
$('#date_start-m').val(arrSplit[1]);
$('#date_start-d').val(arrSplit[2]);
// Populate date_start field (adds 14 days and plunks result in date_finish field)
var nextDayDate = $('#date_start').datepicker('getDate', '+14d');
nextDayDate.setDate(nextDayDate.getDate() + 14);
$('#date_finish').datepicker('setDate', nextDayDate);
splitDateStart($("#date_finish").val());
},
onClose: function() {
//$("#date_finish").datepicker("show");
}
});
I vilket fall som helst, när jQuery utlöses, skickas en AJAX-begäran till den andra filen, 86B. Den här filen slår automatiskt upp saker från databasen, får svaren, skapar en del formaterat HTML-innehåll och echo är det tillbaka till den första filen. Allt detta sker genom Javascript, initierat i webbläsaren - precis som du vill.
Dessa två filer är ett oberoende, fullt fungerande exempel. Byt bara ut MYSQL-inloggningarna och innehållet med dina egna fältnamn etc och se magin hända.
TEST86A.PHP
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//alert('Document is ready');
$('#stSelect').change(function() {
var sel_stud = $(this).val();
//alert('You picked: ' + sel_stud);
$.ajax({
type: "POST",
url: "test86b.php", // "another_php_file.php",
data: 'theOption=' + sel_stud,
success: function(whatigot) {
//alert('Server-side response: ' + whatigot);
$('#LaDIV').html(whatigot);
$('#theButton').click(function() {
alert('You clicked the button');
});
} //END success fn
}); //END $.ajax
}); //END dropdown change event
}); //END document.ready
</script>
</head>
<body>
<select name="students" id="stSelect">
<option value="">Please Select</option>
<option value="John">John Doe</option>
<option value="Mike">Mike Williams</option>
<option value="Chris">Chris Edwards</option>
</select>
<div id="LaDIV"></div>
</body>
</html>
TEST86B.PHP
<?php
//Login to database (usually this is stored in a separate php file and included in each file where required)
$server = 'localhost'; //localhost is the usual name of the server if apache/Linux.
$login = 'abcd1234';
$pword = 'verySecret';
$dbname = 'abcd1234_mydb';
mysql_connect($server,$login,$pword) or die($connect_error); //or die(mysql_error());
mysql_select_db($dbname) or die($connect_error);
//Get value posted in by ajax
$selStudent = $_POST['theOption'];
//die('You sent: ' . $selStudent);
//Run DB query
$query = "SELECT `user_id`, `first_name`, `last_name` FROM `users` WHERE `first_name` = '$selStudent' AND `user_type` = 'staff'";
$result = mysql_query($query) or die('Fn test86.php ERROR: ' . mysql_error());
$num_rows_returned = mysql_num_rows($result);
//die('Query returned ' . $num_rows_returned . ' rows.');
//Prepare response html markup
$r = '
<h1>Found in Database:</h1>
<ul style="list-style-type:disc;">
';
//Parse mysql results and create response string. Response can be an html table, a full page, or just a few characters
if ($num_rows_returned > 0) {
while ($row = mysql_fetch_assoc($result)) {
$r = $r . '<li> ' . $row['first_name'] . ' ' . $row['last_name'] . ' -- UserID [' .$row['user_id']. ']</li>';
}
} else {
$r = '<p>No student by that name on staff</p>';
}
//Add this extra button for fun
$r = $r . '</ul><button id="theButton">Click Me</button>';
//The response echoed below will be inserted into the
echo $r;
Här är ett enklare AJAX-exempel och ändå ett annat exempel för dig att kolla in.
Notera i alla exempel hur användaren tillhandahåller HTML-innehållet (antingen genom att skriva något eller välja ett nytt datumvärde eller välja ett rullgardinsval). De data som användaren tillhandahåller är:
1) GRABBED via jQuery:var sel_stud = $('#stSelect').val();
2) SKICKADE sedan via AJAX till det andra skriptet. ($.ajax({}) saker)
Det andra skriptet använder värdena det tar emot för att slå upp svaret, sedan EKOAR det svaret tillbaka till det första skriptet:echo $r;
Det första skriptet ER EMOT svaret i AJAX framgångsfunktionen och sedan (fortfarande inne i framgångsfunktionen) INJICERAR svaret på sidan:$('#LaDIV').html(whatigot);
Experimentera gärna med dessa enkla exempel -- det första (enklare) länkade exemplet kräver ingen databassökning, så det bör köras utan ändringar.