如何从选定的ajax下拉PHP插入数据

Question

Here's the sample of my codes:

In index.php, I created drop down HTML and load drop down list with employee names from MySQL database table.

<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>

Drop Down Selection Data Load with jQuery Ajax Now in getData.js JavaScript file, we will handle drop down selection change event to get selected value and make Ajax request to server getEmployee.php to get selected employee details from MySQL database table employee. The Ajax request gets response employee data in JSON format from server. We will display that response JSON data with 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();
}
}
});
})
});

Get Data from MySQL Database

Now finally in getEmployee.php, we will get employee details from MySQL database table and return data as JSON using 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;
}
?>

Now, I am going to add SUBMIT button and if that button is set, I want to INSERT the data that has been shown in the table after I clicked one of the employee names in the dropdown option. How do I do that?

Answer 1

You should link the Submit button .click event to an Ajax call.

Also you must have insertEmp.php file which will make the insert.

First, set an id to your Submit button (id = submitButton)

An approximation of the code could be like this:

$('#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) {
        }
    })
})