If you are looking for tutorial on how can we insert checkbox values to mysql table by using Ajax with JQuery in PHP without page refresh. Suppose you have working on any web application and in that application when user check the checkbox then at that time the value of that checkbox must be insert into mysql table without refreshing page by using Ajax with JQuery in PHP Programming.
For describing this things I have one mysql table I will insert checkbox value into that table. I have define checkboxes with values like how many subjects you have known, when user select more than one subject checkbox then all value of checkbox store into an array using Jquery and I will convert that array to string and by using Jquery ajax method I will insert values of all checkboxs to table by using PHP script.
If you wanted to learn with detail description, you can watch video which you can find top of this post.
Database
--
-- Table structure for table `tbl_subject`
--
CREATE TABLE IF NOT EXISTS `tbl_language` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`subject_name` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
--
-- Dumping data for table `tbl_subject`
-- index.php
<!DOCTYPE html>
<html>
<head>
<title>Tutorial | Insert Checkbox values using Ajax Jquery in PHP</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">Insert Checkbox values using Ajax Jquery in PHP</h3>
<div class="checkbox">
<input type="checkbox" class="get_value" value="Physics" />Physics <br />
<input type="checkbox" class="get_value" value="Chemistry" />Chemistry <br />
<input type="checkbox" class="get_value" value="Mathematics" />Mathematics <br />
<input type="checkbox" class="get_value" value="Biology" />Biology <br />
</div>
<button type="button" name="submit" class="btn btn-info" id="submit" onClick="SumitMCQ();">Submit</button>
<br />
<div id="result"></div>
</div>
</body>
</html>
<script>
function SumitMCQ() {
var subject = [];
$('.get_value').each(function(){
if($(this).is(":checked"))
{
subject.push($(this).val());
}
});
subject= subject.toString();
$.ajax({
url:"submit.php",
method:"POST",
data:'myField='+$("#myField").val()+'&subject='+subject,
//data:'myField='+$("#myField").val()+'&languages='+languages,
success:function(data){
$('#result').html(data);
}
});
}
</script>
submit.php
<?php
//submit.php
if(isset($_POST["subject"]))
{
$connect = mysqli_connect("localhost", "root", "", "demo");
$query = "INSERT INTO tbl_subject(name) VALUES ('".$_POST["subject"]."')";
$result = mysqli_query($connect, $query);
echo 'Check Box Data Inserted';
}
?> Good luck and I hope this article can be useful. See you in the next article…
If you enjoyed this tutorial and learned something from it, please consider sharing it with our friends and followers! Also like to my facebook page to get more awesome tutorial each week!