Radio Button value Insert using AJAX in PHP
- Tech Area
- November 2, 2023
In this tutorial, We will learn how to get and insert radio button value using JQuery AJAX in PHP and MySQL.
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 radio button 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 radio button data into the database using AJAX in PHP and MySQL.
This screenshot shows the registration form with radio button.
index.php
<!DOCTYPE html>
<head>
<title>Insert Radio button 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:700px;
background-color:#f9f9f9;
border:1px solid #ccc;
border-radius:5px;
padding:16px;
margin:0 auto;
}
.msg
{
color: red;
font-weight: 700;
}
</style>
<body>
<div class="container">
<div class="table-responsive">
<h3 align="center">Insert Radio button 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="gender">Gender</label><br>
<input type="radio" name="gender" value="Male"/> Male
<input type="radio" name="gender" value="Female"/> Female
<input type="radio" name="gender" value="others"/> Others
</div>
<div class="form-group">
<input type="submit" id="register" name="register" value="Submit" class="btn btn-success" />
</div>
<p class="msg"></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 gender = $("input[name='gender']:checked").val();
$.ajax({
url: 'insert-data.php',
method: 'post',
data: {name:name, email:email, gender:gender},
success: function(result)
{
$(".msg").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 the database.
insert-data.php
<?php
include("connection.php");
$name = $_POST['name'];
$email = $_POST['email'];
$gender = $_POST['gender'];
$insert_query = mysqli_query($connection,"insert into tbl_student set name='$name', email='$email', gender='$gender'");
if($insert_query>0)
{
echo "Data inserted!";
}
else
{
echo "Error!";
}
?>Download Source Code
Join 10,000+ subscriber