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. 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 using JQuery script after that, you can use these ID's in AJAX Code to perform delete operation.
  2. Fetching the Unique values 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 
CREATE TABLE `post` (
  `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


index.php
Consists of HTML FORM with list of checkbox's and some JQuery script to get the selected checkbox values.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.2.1.min.js"></script>
<style>
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;
}
</style>
<script>

function getSelectedVal(){
var ID={};
ID.values=[];
$("input#checkDelete").each(function(){
    var $this = $(this);    
    if($this.is(":checked")){        
        ID.values.push($this.attr("value"));        
    }
    $( "#displaySelectedValue" ).text(ID.values);
});     
}

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

</script>
</head>
<body>
<div style="width:700px;margin:100px auto;">
You Can use below selected ID during ajax call
<div id="displaySelectedValue">
</div>
<br>
<form  method="post" action="submit.php" >
<table>
  <tr>
    <th> <input type='checkbox' id="checkAll" name='checkAll' /> </th>
    <th>Skptricks Tutorials</th>
    <th>Link</th>
  </tr>
  <?php
  include("getData.php");
  ?>
</table>
<br>
<input type='submit' id="submit" name='submit' value="delete" />

</form>
</div>
</body>
</html>

getData.php
Retrieve data from data from database and display in tabular form using HTML FORM.
<?php
$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`');
$stmt->execute();

$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>
  </tr>";

}
}

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

?>

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

Download Link : https://github.com/skptricks/php-Tutorials/tree/master/Submit%20Checkbox%20Values%20In%20Form%20With%20JQuery

No comments:

Post a Comment