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 MySQL 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 database connection

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.

Leave a Reply

Your email address will not be published.