Insert multiple checkbox value using jQuery AJAX in PHP MySql


Insert multiple checkbox value using jQuery AJAX in PHP MySql
Hi, Friends, 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.
Here we are using three file to insert multiple checkbox values into database in Mysql jquery AJAX.
  1. Create database connection 
  2. Create a multiple checkbox HTML page
  3. Create PHP code for Insert checkbox value in database

1. Create database connection

First of all we need to create database connection file that name the dbConfig.php file.
<?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);
}

?>

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

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

Insert multiple checkbox value using jQuery AJAX in PHP MySql
                                          
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.😊


Leave a Reply