PHP and jQuery checkbox array with a hint of Jquery UI
I have been learning jQuery alongside PHP to help with my event manager project. Here is a tutorial on how to get the values of a checkbox array, post it via a jQuery Ajax call and subsequently delete the values from an MYSQL database. This tutorial also makes use of the jQuery UI which we will use to display our dialogues. This script has now been included in wow playground with new and updated features.
Prerequisites
I am assuming that you have access to a PHP web server and have a MYSQL database. I highly recommend Xampp for your testing needs. I am also assuming that you know the basics on uploading and using an FTP program and have the use of a text editor or IDE.
Database Setup
For an in depth explanation on how to setup the database setup visit one of my previous tutorials. Download the source files and edit config.php in the lib directory to include the details of your database. Upload them to your server. Navigate using your browser to the files. For example: https://localhost/jquery_checkboxes/lib/setup.php
Click on the Setup button and this will setup the database for you and re-direct you to index.php.
Index.php
The main files are index.php, checkbox.js and process.php. First we will have a look at the main part of index.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<body> <h1>PHP Checkbox Array Tutorial</h1> <div id="dialog-confirm" title="Delete Item(s)?"> <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">nbsp;</span> These items will be permanently deleted and cannot be recovered. Are you sure? </p> </div> <?php require('lib/Database.class.php'); $db->connect(); $query='SELECT * FROM events'; $rows=$db->query($query); if (mysql_num_rows($rows)) {?> <form name='delete_form' id='delete_form' action='' method='post'> <input type="checkbox" id="selectAll" name="deleteCB[]" /><br/> <?php while ($result = $db->fetch_array($rows)) { $id = $result['id']; $event = $result['event']; echo "<input type='checkbox' name='deleteCB[]' value='$id' />$event<br/>"; } echo "<input type='submit' id='deleteBtn' value='Delete' name='deleteBtn' />"; echo "</form>"; } //end if?> </body> </html> |
Here we fetch the data from the MYSQL database and place it into a form. Line 21 is very important as it contains our checkbox array name deleteCB[] which we use via jQuery to obtain our values.
Checkboxes.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
$(function() { $("#selectAll").click(function() { var checked_status = this.checked; $('input[name="deleteCB[]"]').each(function() { this.checked = checked_status; }); }); $("#delete_form").submit(function(e) { return false; }); var $dialog = $('<div></div>') .html('Item(s) have been successfully deleted') .dialog({ autoOpen: false }); var $dialog2 = $('<div></div>') .html('No checkboxes are checked!') .dialog({ autoOpen: false, title: 'Error' }); $("#deleteBtn").click(function() { if ($('input[type=checkbox]').is(':checked')){ $( "#dialog-confirm" ).dialog({ modal: false, buttons: { "Delete all items": function() { $(this ).dialog( "close" ); var data = $(":checkbox:checked").map(function(i,n) { return $(n).val(); }).get(); $.post("process.php", { 'deleteCB[]': data }, function(){ $('body').load('index.php', function() { $dialog.dialog({title: 'Item(s) Deleted'}); }); }); }, Cancel: function() { $( this ).dialog( "close" ); return false; } } //end buttons }); } else { $dialog2.dialog("open"); } }); }); |
Process.php
1 2 3 4 5 6 7 8 9 10 |
<?php require ('lib/Database.class.php'); $db->connect(); foreach ($_POST['deleteCB'] as $value) { $query_delete = "DELETE FROM events WHERE id='$value'"; $db->query($query_delete); } $db->close(); ?> |