Insert Multiple Checkbox Value Using JQuery AJAX In PHP MySql

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.

Table of Contents

How to show multiple checkbox checked in PHP

I will insert the value of checkboxes in the database and show multiple checkbox checked 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

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 or problems about this tutorial, please comment on the form below.😊