How can we Insert html input type radio button value on single click in php by using jquery with ajax method. This is the small features but it will plays vital role in most of the web development when you work on with gender like functionalities. This is simply an idea to understand how to insert value of radio button without refreshing page with the help of jQuery. For this I have create two radio button with gender value like male and female. When user will click on any radio button than jquery code will execute on click event of radio button and by jquery code we can called ajax method and via ajax method we can pass the radio button value to php script and by php script we can insert radio button value into mysql table. This is my simple description, if want to learn in more details, you can see the php video which you can find on top of this post.
Source Code
--
-- Table structure for table `tbl_gender`
--
CREATE TABLE IF NOT EXISTS `tbl_gender` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`gender` varchar(20) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
--
-- Dumping data for table `tbl_gender`
--
insert_radiobtn.php
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | PHP Jquery Ajax : Insert Radio Button value on click</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container" style="width:500px;">
<h3 class="text-center">How to insert Radio Button value</h3>
<div class="radio">
<input type="radio" name="gender" value="Male" />Male <br />
<input type="radio" name="gender" value="Female" />Female <br />
<input type="radio" name="gender" value="Other" />Other <br />
</div>
<div id="result"></div>
</div>
<br />
</body>
</html>
<script>
$(document).ready(function(){
$('input[type="radio"]').click(function(){
var gender = $(this).val();
$.ajax({
url:"insert.php",
method:"POST",
data:{gender:gender},
success:function(data){
$('#result').html(data);
}
});
});
});
</script>
insert.php
<?php
//insert.php
$host = "localhost";
$username = "root";
$password = "";
$database = "testing";
try
{
$connect = new PDO("mysql:host=$host;dbname=$database",$username, $password);
$connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
if(isset($_POST["gender"]))
{
$query = "INSERT INTO tbl_gender(gender) VALUES (:gender)";
$statement = $connect->prepare($query);
$statement->execute(
array(
'gender' => $_POST["gender"]
)
);
$count = $statement->rowCount();
if($count > 0)
{
echo "Gender Inserted Successfully!";
}
else
{
echo 'Not Inserted';
}
}
}
catch(PDOException $error)
{
echo $error->getMessage();
}
?>
what do I have to customize if I have multiple radio buttons?
ReplyDeletehow to fetch radiobutton value from database and display as checked using pdo
ReplyDeleteBro ...You are so greate
ReplyDeleteit's helped me a lot
ReplyDeleteIt is working fine on localhost but not working in hosting website can you help me?
ReplyDelete