Вы должны использовать AJAX для этой задачи.Вы можете использовать jQuery ajax или ванильный JavaScript ajax.
Я создал полный рабочий пример с использованием ванильного JavaScript, который я протестировал, и он отлично работает.
Вот изменения, которые я сделал:
- Я добавил
onchange слушатель элемента select в HTML, например onchange="selectMachineNumber()" - Я создал функцию javascript с именем
selectMachineNumber, которая будет выполняться при каждом изменении меню выбора.В рамках этой функции мы делаем ajax-запрос к php-файлу с именем machine_number_processing.php (содержащим ваш php-скрипт). - Я возвращаю ответ в кодировке json, содержащий переменную
serialNumberRemarks. - Затем я вставил
serialNumberRemarks в ваш html в тег span (внутри вашего ярлыка).Тег span имеет идентификатор: machine-serial-number.
index.html (или как бы там ни было название вашей HTML-страницы)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//declare a global xmlhttp variable
var xmlhttp;
function createXHR(){
//This function sets up the XMLHttpRequest
try{
return new XMLHttpRequest();
}catch(e){
//to support older browsers
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
return new ActiveXObject("Msxml2.XMLHTTP");
}
}
}
function selectMachineNumber(selectElement){
//this function will be called when there is a change in the machineNumber select menu
//check the value selected in the console as follows:
console.log(selectElement.value);
var machineNumber = selectElement.value;
//do ajax request
xmlhttp = createXHR();
xmlhttp.onreadystatechange = ajaxCallback; //name of our callback function here
//Ive called the php file machine_number_processing.php but you can call it whatever you like.
xmlhttp.open("POST", "machine_number_processing.php" ,true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//send our variables with the request
xmlhttp.send("machineNumber=" + machineNumber);
}
function ajaxCallback(){
//this function will be executed once the ajax request is completed
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
//The ajax request was successful.
//we can now get the response text using xmlhttp.responseText.
//This will be whatever was echoed in the php file
//we also need to parse this as JSON because we used json_encode on the PHP array we sent back
var data = JSON.parse(xmlhttp.responseText);
console.log(data.machineNumber);
console.log(data.serialNumberRemarks);
//insert the serialNumberRemarks to the span tag with id="machine-serial-number"
document.getElementById("machine-serial-number").innerText = data.serialNumberRemarks;
}
}
</script>
</head>
<body>
<div class="form-group col-sm-2">
<label>Machine</label><br>
<select class="combobox form-control col-sm-2" name="machineNumber" id="machineNumber" onchange="selectMachineNumber(this)">
<option>1</option>
<option>2</option>
</select><br>
<label id="machineSer">Machine Serial Number: <span id="machine-serial-number"></span></label>
</div>
</body>
</html>
machine_number_processing.php
<?php
if(isset($_POST['machineNumber'])){
$machineName = $_POST['machineNumber'];
$query = "SELECT machineSerialRemarks FROM machinenames WHERE machineName = '$machineName'";
$result = mysqli_query($conn, $query);
$row = mysqli_fetch_array($result);
$serialNumberRemarks = $row['machineSerialRemarks'];
//create a PHP array to store the data we will send back to the client side
$responseData = array();
//store the machineNumber that was submitted into a variable in order to test the ajax request
//without performing the SQL query.
$responseData['machineNumber'] = $_POST['machineNumber'];
//store the $serialNumberRemarks variable into our response array
$responseData['serialNumberRemarks'] = $serialNumberRemarks;
echo json_encode($responseData); //echo the response data back to the client
}
?>
Примечание: Как вы знаете (как уже говорили люди в комментариях), вам нужно посмотреть, как сделать ваш код SQL более безопасным, но для демонстрации я оставил ваш код PHP таким, какой он есть.
Надеюсь, это поможет:)
Редактировать
Если вы просто хотите проверить , что работает ajax-запрос (без выполнения SQL-запроса), тогда измените свой phpфайл для следующего
machine_number_processing.php
<?php
if(isset($_POST['machineNumber'])){
$machineName = $_POST['machineNumber'];
//create a PHP array to store the data we will send back to the client side
$responseData = array();
//store the machineNumber that was submitted into a variable in order to test the ajax request
//without performing the SQL query.
$responseData['machineNumber'] = $_POST['machineNumber'];
echo json_encode($responseData); //echo the response data back to the client
}
?>
А в функции ajaxCallback закомментируйте эти две строки :
console.log(data.serialNumberRemarks);
document.getElementById("machine-serial-number").innerText = data.serialNumberRemarks;
Вы можете проверить ответ, полученный на вкладке «Сеть» в инструментах разработчика, следующим образом:
Редактировать 2 - сделать код PHP более безопасным
Я хотел показать пример того, как использовать расширение PHP Data Objects (PDO) в вашем проекте.Это интерфейс для доступа к базам данных в PHP.
Имеет подготовленных операторов , что помогает повысить безопасность обработки (т. Е. помогает предотвратить внедрение SQL ).
Вот рабочий примеркак вы можете включить его в свой код (вместо использования mysqli)
Ваш файл, в котором вы устанавливаете соединение, будет выглядеть примерно так:
connect.php
<?php
//Define our connection variables. (really these credentials should be in a file stored in a private folder on the server but i'll them here for simplicity.)
//set the character set for more security. (I will use utf8mb4. This is a good idea if you want to store emojis. YOu can just use utf8 though.
define("HOSTDBNAME", "mysql:host=localhost;dbname=machine_app;charset=utf8mb4");
define("USER", "root");
define("PASSWORD", "");
//initiate a PDO connection
$pdoConnection = new PDO(HOSTDBNAME, USER, PASSWORD);
$pdoConnection->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$pdoConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
//set the character set for more security. set it to utf8mb4 so we can store emojis. you can just use utf8 if you like.
$pdoConnection->exec("SET CHARACTER SET utf8mb4");
?>
Создайте файл phpfunctions.php для хранения функции getSerialNumberRemarks(), которая делает запрос к базе данных для получения $serialNumberRemarks
phpfunctions.php
<?php
function getSerialNumberRemarks($machineName, $pdoConnection){
/*
* This is a function to access the machinenames table using PDO with prepared statements and named parameters.
* I have included extra comments (for learning purposes) with appropriate information taken
* from the documentation here: http://php.net/manual/en/pdo.prepare.php
*/
$serialNumberRemarks = "";
try{
//We create our $query with our named (:name) parameter markers
//These parameters will be substituted with real values when the statement is executed.
//Use these parameters to bind any user-input, (N.B do not include the user-input directly in the query).
$query ="SELECT machineSerialRemarks FROM machinenames WHERE machineName = :machineName";
//We now use the PDO::prepare() method on the query.
//Note: calling PDO::prepare() and PDOStatement::execute() helps to prevent SQL injection attacks by eliminating the need
//to manually quote and escape the parameters.
$statement = $pdoConnection->prepare($query);
//We now bind our user-input values.
//If the user-input is an INT value then use PDO::PARAM_INT, if it is a string then use PDO::PARAM_STR.
//$machineName will be an INT so bind the value as follows.
$statement->bindValue(':machineName', $machineName, PDO::PARAM_INT);
$statement->execute();
$statement->setFetchMode(PDO::FETCH_ASSOC);
while($row = $statement->fetch()){
$serialNumberRemarks = $row['machineSerialRemarks'];
}
return $serialNumberRemarks;
}catch(PDOException $e){
throw new Exception($e);
}
}
?>
Ниже приведен файл, в который собирается запрос AJAX.Нам нужно включить файл connect.php и файл phpfunctions.php.
machine_number_processing.php
<?php
require("connect.php"); //this file contains our PDO connection configuration
require("phpfunctions.php"); //this file contains the getSerialNumberRemarks(); function
if(isset($_POST['machineNumber'])){
//store $_POST['machineNumber'] into a local variable
$machineName = $_POST['machineNumber'];
//checks should be done here to check the input is valid i.e it's a valid length, its valid encoding.
//You should also filter the input.
//This can be done with PHP methods such as trim(), htmlspecialchars(), strip_tags(), stripslashes()
//and other methods depending on the type of input.
//In this demonstration I will perform minimal sanitization of the input.
//Note: if its a string use FILTER_SANITIZE_STRING instead
$machineName = filter_var($machineName, FILTER_SANITIZE_NUMBER_INT);
//create a PHP array to store the data we will send back to the client side
$responseData = array();
//call the getSerialNumberRemarks() function and store the serialNumberRemarks returned into our response array
$responseData['serialNumberRemarks'] = getSerialNumberRemarks($machineName, $pdoConnection);
echo json_encode($responseData); //echo the response data back to the client
}
?>