Thêm và Xóa Động Các Trường Nhập Bằng jQuery Ajax – Ví dụ với demo. Đoạn mã ví dụ hiển thị cách tạo các trường nhập động trong một biểu mẫu cũng như gửi giá trị trường nhập HTML vào cơ sở dữ liệu MySQL.
PHP – Thêm và Xóa Động Các Trường Nhập Bằng jQuery Ajax – Ví dụ với Demo
Bước 1: Tạo Bảng Cơ Sở Dữ Liệu
CREATE TABLE IF NOT EXISTS `category` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci AUTO_INCREMENT=24 ;
Bước 2: Tạo Tệp index.php
index.php
<!DOCTYPE html>
<html>
<head>
<title>PHP - Dynamically Add or Remove input fields using JQuery - www.pakainfo.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 align="center">PHP - Dynamically Add or Remove input fields using JQuery - www.pakainfo.com</h2>
<div class="form-group">
<form name="cat_name" id="cat_name">
<div class="table-responsive">
<table class="table table-bordered" id="livemode_field">
<tr>
<td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" required="" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var postURL = "/do_submit.php";
var i=1;
$('#add').click(function(){
i++;
$('#livemode_field').append('<tr id="row'+i+'" class="livemode-added"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" required /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$('#submit').click(function(){
$.ajax({
url:postURL,
method:"POST",
data:$('#cat_name').serialize(),
type:'json',
success:function(data)
{
i=1;
$('.livemode-added').remove();
$('#cat_name')[0].reset();
alert('Record Inserted Successfully.');
}
});
});
});
</script>
</body>
</html>
Bước 3: Tạo Tệp do_submit.php
do_submit.php
<?php
define (DB_USER, "root");
define (DB_PASSWORD, "DSf89745f");
define (DB_DATABASE, "category_list");
define (DB_HOST, "localhost");
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
if(!empty($_POST["name"])){
foreach ($_POST["name"] as $key => $value) {
$sql = "INSERT INTO category(name) VALUES ('".$value."')";
$mysqli->query($sql);
}
echo json_encode(['success'=>'Categories Inserted successfully.']);
}
?>
Hy vọng bạn có ý tưởng về cách thêm và xóa động các trường nhập bằng jQuery và gửi vào cơ sở dữ liệu.
- Bài đăng blog này được xuất bản ban đầu tại: https://www.pakainfo.com
