Можете да използвате комбинация от jQuery и AJAX, за да направите това. Много по-просто, отколкото звучи. За да видите, че това е правилният отговор за вас, Просто вижте този пример .
В примера по-долу има два .PHP файла:test86a.php и test86b.php.
Първият файл, 86A, има просто поле за избор (падащо меню) и някакъв jQuery код, който следи за промяна на това поле за избор. За да задействате jQuery кода, можете да използвате jQuery .blur() функция, за да следите потребителят да напусне полето за дата, или можете да използвате 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");
}
});
Във всеки случай, когато jQuery се задейства, AJAX заявка се изпраща към втория файл, 86B. Този файл автоматично търси неща от базата данни, получава отговорите, създава малко форматирано HTML съдържание и echo Това е обратно към първия файл. Всичко това се случва чрез Javascript, иницииран в браузъра - точно както искате.
Тези два файла са независим, напълно работещ пример. Просто заменете данните за влизане и съдържанието на MYSQL с вашите собствени имена на полета и т.н. и гледайте как се случва магията.
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;
Ето по-прост пример за AJAX и все пак друг пример за да проверите.
Във всички примери отбележете как потребителят предоставя HTML съдържанието (независимо дали чрез въвеждане на нещо, избор на нова стойност за дата или избор на падащо меню). Предоставените от потребителя данни са:
1) ВЗЕХНАТО чрез jQuery:var sel_stud = $('#stSelect').val();
2) след това ИЗПРАТЕНО чрез AJAX към втория скрипт. ($.ajax({}) неща)
Вторият скрипт използва стойностите, които получава, за да търси отговора, след което ECHOES отговора обратно към първия скрипт:echo $r;
Първият скрипт ПОЛУЧАВА отговора във функцията за успех AJAX и след това (все още във функцията за успех) ИНЖЕКТИРА отговора на страницата:$('#LaDIV').html(whatigot);
Моля, експериментирайте с тези прости примери – първият (по-прост) свързан пример не изисква търсене в база данни, така че трябва да работи без промени.
