Wednesday, October 25, 2017

Submit Checkbox values in Form with JQuery

This post explains how to submit checkbox values in Form using JQuery. Also in this tutorial we have provided complete explanation how to get selected checkbox Values/Unique IDs using JQuery and PHP. Based on this values you can perform delete or other operations as per the need.

We have retrieved these Values/Unique IDs using below two methods:
  1. Fetching the Unique values/ID's of selected checkbox field using JQuery script. ( Note : Once you get all these Unique values/ID's after that, you can use these ID's in AJAX Code and perform delete operation.)
  2. Fetching the Unique values of selected checkbox field using PHP script, when we submit the FORM by clicking on delete button and afterwards page redirected to "submit.php" page. This page will show selected checkbox Unique values/ID's.

Lets see the example to build more understanding.

Create "POST" Table 
  `POSTID` int(3) NOT NULL,
  `POSTTITLE` varchar(100) NOT NULL,
  `POSTLINK` varchar(100) NOT NULL

How to handle multiple Checkboxes Values in a FORM using PHP

Consists of HTML FORM with list of checkbox's and some JQuery script to get the selected checkbox values.
<!DOCTYPE html>
<script src="jquery-3.2.1.min.js"></script>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;

td,th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;    

tr:nth-child(odd) {
    background-color: #dddddd;

function getSelectedVal(){
var ID={};
    var $this = $(this);    
    $( "#displaySelectedValue" ).text(ID.values);

 $("#checkAll").click(function () {
     $('input:checkbox').not(this).prop('checked', this.checked);          
 $("input[type='checkbox']").change(function() {    

<div style="width:700px;margin:100px auto;">
You Can use below selected ID during ajax call
<div id="displaySelectedValue">
<form  method="post" action="submit.php" >
    <th> <input type='checkbox' id="checkAll" name='checkAll' /> </th>
    <th>Skptricks Tutorials</th>
<input type='submit' id="submit" name='submit' value="delete" />


Retrieve data from data from database and display in tabular form using HTML FORM.
$dbhost ="localhost"; // set the hostname
$dbname ="skptricksdemo" ; // set the database name
$dbuser ="root" ; // set the mysql username
$dbpass ="";  // set the mysql password

try {
$dbConnection = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass); 
$dbConnection->exec("set names utf8");
$dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $dbConnection->prepare('SELECT * FROM `post`');

$Count = $stmt->rowCount(); 
//echo " Total Records Count : $Count .<br>" ;

if ($Count  > 0){
while($data=$stmt->fetch(PDO::FETCH_ASSOC)) {

echo "<tr>
    <td><input type='checkbox' id='checkDelete' name='checkDelete[]' 
 value='".$data['POSTID']."' /> </td>
    <td> ".$data['POSTTITLE']."</td>
    <td><a href=".$data['POSTLINK']."> Click Here </a></td>


catch (PDOException $e) {
echo 'Connection failed: ' . $e->getMessage();
$dbConnection =null;


On click on delete button, all the selected checkbox values requested to "submit.php" page using POST Method.
if(isset($_POST['checkDelete']) && isset($_POST['submit']))
foreach($_POST['checkDelete'] as $selected){
echo $selected."</br>";
// write your code to perform delete operation

Video Link :

Download Link :

No comments:

Post a Comment