In this post I show you how to insert multiple checkbox value in database using jQuery AJAX in PHP MySLQ without page refresh. when an user uses a checkbox, the checkbox value is inserted into the MySQL database without refreshing the web page with Ajax, jQuery in PHP.
I will insert the value of boxes in the database and examples with values such as the name of the course and how many courses you like, if the user chooses more than one in the box, then all the checkbox values will be stored in an array with jQuery and I will use this array to convert to a string and insert the values of all the checkbox into the table using the jQuery & Ajax method using PHP.
Create MySql Connection in PHP
For importing and exporting database in MySql will make a separate file ‘dbCongif.php’. Add the following code and replace the database credentials with yours. You can find your db credentials in Application Access details:
First of all we need to create database connection file that name the dbConfig.php file.
dbConfig.php
<?php
// Database configuration
$dbHost = "localhost";
$dbUsername = "root";
$dbPassword = "";
$dbName = "testing";
// Create database connection
$con = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
// Check connection
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}
?>Create a multiple checkbox HTML page
index.php
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Insert multiple checkbox using jQuery AJAX in PHP MySql</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #ebebeb">
<div class="container" style="margin-top: 50px;">
<h2 class="text-center">Insert multiple checkbox using jQuery AJAX in PHP MySql</h2>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6" style="margin-top:20px; margin-bottom:20px;">
<form id="formSubmit">
<div class="form-group">
<input type="text" class="form-control" name="name" id="name" placeholder="Student Name">
</div>
<h5>Courses</h5>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="BCA"> BCA
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="MCA"> MCA
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="BBA"> BBA
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="BTECH"> BTECH
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="MTECH"> MTECH
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="BA"> BA
</label>
</div><br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>jQuery AJAX Script
<!---jQuery ajax Insert multiple checkbox value --->
<script type="text/javascript">
$(document).ready(function(){
$("#formSubmit").on("submit",function(e){
e.preventDefault();
var name = $("#name").val();
var course = [];
$(".form-check-input").each(function(){
if ($(this).is(":checked")) {
course.push($(this).val());
}
});
course = course.toString(); // toString function convert array to string
if (name !=="" && course.length > 0) {
$.ajax({
url : "insert.php",
type: "POST",
cache: false,
data : {name:name,course:course},
success:function(result){
if (result==1) {
$("#formSubmit").trigger("reset");
alert("Data insert in database successfully");
}
}
});
}else{
alert("Fill the required fields");
}
});
});
</script>Create PHP code for Insert checkbox value in database
insert.php
<?php
// Include database connection
include_once "dbConfig.php";
// Insert multiple checkbox value in databse
if ($_POST['name']) {
$name = $_POST['name'];
$course = $_POST['course'];
$query = "INSERT INTO courses(name,courses) VALUES('$name', '$course')";
$result = $con->query($query);
if ($result) {
echo 1;
}else{
echo 0;
}
}
?>Output
You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions / problems about this tutorial, please comment on the form below.😊
