Insert Checkbox value using AJAX in PHP & MySQL
- Tech Area
- October 30, 2023
In this tutorial, We will learn how to insert checkbox value using JQuery AJAX in PHP and MySQL. We are using two textbox and three checkboxes in the form to save data into the database using AJAX in PHP.
Files used in this tutorial:
1- connection.php (database connection file)
2- index.php (AJAX script)
3- insert-data.php (insert data into the table)
Below are the step by step process of how to insert checkbox value using Jquery AJAX.
Step 1: Create a Database connection
In this step, create a new file connection.php to create database connection.
connection.php
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "college_db";
$connection = mysqli_connect("$server","$username","$password");
$select_db = mysqli_select_db($connection, $database);
if(!$select_db)
{
echo("connection terminated");
}
?>Step 2: Create index.php
In this step, create a new file index.php. This is the main file used to implement AJAX to insert checkbox value into the database using AJAX in PHP and MySQL.
This screenshot shows the registration form with checkboxes.
index.php
<!DOCTYPE HTML>
<head>
<title>Insert Checkbox Value using PHP AJAX</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<style>
.box
{
width:100%;
max-width:600px;
background-color:#f9f9f9;
border:1px solid #ccc;
border-radius:5px;
padding:16px;
margin:0 auto;
}
.error
{
color: red;
font-weight: 700;
}
</style>
<body>
<div class="container">
<div class="table-responsive">
<h3 align="center">Insert Checkbox Value using PHP AJAX</h3>
<div class="box">
<div class="form-group">
<label for="name">Enter Your Name</label>
<input type="text" name="name" id="name" placeholder="Enter Name" class="form-control"/>
</div>
<div class="form-group">
<label for="email">Enter Your Email</label>
<input type="text" name="email" id="email" placeholder="Enter Email" class="form-control"/>
</div>
<div class="form-group">
<label for="language">Select Language</label><br>
<input type="checkbox" class="language" value="PHP"/> PHP
<input type="checkbox" class="language" value="Java"/> Java
<input type="checkbox" class="language" value=".NET"/> .NET
</div>
<div class="form-group">
<input type="submit" id="register" name="register" value="Submit" class="btn btn-success" />
</div>
<p class="error"></p>
</div>
</div>
</div>
</body>
</html>Now use jquery AJAX script.
<script type="text/javascript">
$(document).ready(function(){
$("#register").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var lang_name = [];
$(".language").each(function(){
if($(this).is(":checked"))
{
lang_name.push($(this).val());
}
});
language = lang_name.toString();
$.ajax({
url: "insert-data.php",
method: "post",
data: {name:name, email:email, language_name:language},
success: function(result)
{
$(".error").html(result);
}
});
});
});
</script>Step 3: Create new file for insert data
In this step, create a new file insert-data.php. This file used to insert data into database.
insert-data.php
<?php
include("connection.php");
$name = $_POST['name'];
$email = $_POST['email'];
$language = $_POST['language_name'];
$insert_query = mysqli_query($connection,"insert into tbl_language set name='$name', email='$email', language='$language'");
if($insert_query>0)
{
echo "Data Inserted Successfully.";
}
else
{
echo "Error!";
}
?>Download Source Code
Join 10,000+ subscriber