Как вставить данные из выбранного раскрывающегося списка ajax PHP

Question

Вот пример моих кодов:

В index.php я создал раскрывающийся список HTML и загрузил раскрывающийся список с именами сотрудников из таблицы базы данных MySQL.

<div class="page-header">
<h3>
<select id="employee">
<option value="" selected="selected">Select Employee Name</option>
<?php
$sql = "SELECT id, employee_name, employee_salary, employee_age FROM 
employee LIMIT 10";
$resultset = mysqli_query($conn, $sql) or die("database error:". 
mysqli_error($conn));
while( $rows = mysqli_fetch_assoc($resultset) ) {
?>
<option value="<?php echo $rows["id"]; ?>"><?php echo 
$rows["employee_name"]; ?></option>
<?php } ?>
</select>
</h3>
</div>
<div id="display">
        <div class="row" id="heading" style="display:none;"><h3><div 
class="col-sm-3"><strong>Employee Name</strong></div><div class="col-sm-4"> 
<strong>Age</strong></div><div class="col-sm-4"><strong>Salary</strong> 
</div> 
</h3></div><br>         
 <div class="row" id="records"><div class="col-sm-3" id="emp_name"></div> 
<div class="col-sm-4" id="emp_age"></div><div class="col-sm-3" 
id="emp_salary"></div></div>            
        <div class="row" id="no_records"><div class="col-sm-3">Plese select 
employee name to view details</div></div>
    </div>      
    <div style="margin:50px 0px 0px 0px;">
<input type="submit" class="btn btn-default read-more" name="submit" value="submit">
</div>      
</div>

Выпадающая загрузка данных выбора с помощью jQuery Ajax Теперь в файле JavaScript getData.js мы будем обрабатывать событие изменения выбора, чтобы получить выбранное значение, и сделать Ajax-запрос на сервер getEmployee.php, чтобы получить сведения о выбранном сотруднике из таблицы базы данных MySQL.работник.Ajax-запрос получает ответные данные сотрудника в формате JSON с сервера.Мы отобразим эти JSON-данные ответа с помощью jQuery.

$(document).ready(function(){
// code to get all records from table via select box
$("#employee").change(function() {
var id = $(this).find(":selected").val();
var dataString = 'empid='+ id;
$.ajax({
url: 'getEmployee.php',
dataType: "json",
data: dataString,
cache: false,
success: function(employeeData) {
if(employeeData) {
$("#heading").show();
$("#no_records").hide();
$("#emp_name").text(employeeData.employee_name);
$("#emp_age").text(employeeData.employee_age);
$("#emp_salary").text(employeeData.employee_salary);
$("#records").show();
} else {
$("#heading").hide();
$("#records").hide();
$("#no_records").show();
}
}
});
})
});

Получение данных из базы данных MySQL

Теперь, наконец, в getEmployee.php мы получим сведения о сотрудниках из MySQLтаблицу базы данных и вернуть данные в виде JSON с помощью json_encode.

<?php
include_once("db_connect.php");
if($_REQUEST['empid']) {
$sql = "SELECT id, employee_name, employee_salary, employee_age FROM 
employee WHERE id='".$_REQUEST['empid']."'";
$resultset = mysqli_query($conn, $sql) or die("database error:". 
mysqli_error($conn));
$data = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {
$data = $rows;
}
echo json_encode($data);
} else {
echo 0;
}
?>

Теперь я собираюсь добавить кнопку SUBMIT, и если эта кнопка установлена, я хочу вставить данные, показанные впосле того, как я щелкнул одно из имен сотрудников в раскрывающемся списке.Как мне это сделать?

Answer 1

Вы должны связать событие .click кнопки Submit с вызовом Ajax.

Также у вас должен быть файл insertEmp.php, который сделает вставку.

Сначала установите id для вашегоКнопка отправки (id = submitButton)

Аппроксимация кода может быть такой:

$('#submitButton').click(function() {

    $.ajax({
        url:"/insertEmp",
        type: "POST",
        data: {emp_name:$('#emp_name').val() , emp_salary:$('#emp_salary').val() , .. all the others parameters...  },
        success: function (results) {
        },
        error: function (results) {
        }
    })
})