article

Sunday, April 25, 2021

Update Multiple Selected Records using PHP Mysql and Jquery Ajax

Update Multiple Selected Records using PHP Mysql and Jquery Ajax


CREATE TABLE `employee` (
  `id` int(11) NOT NULL,
  `name` varchar(100) NOT NULL,
  `position` varchar(100) NOT NULL,
  `office` varchar(100) NOT NULL,
  `age` int(11) NOT NULL,
  `salary` int(11) NOT NULL,
  `photo` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `employee` (`id`, `name`, `position`, `office`, `age`, `salary`, `photo`) VALUES
(1, 'Tiger Wood', 'Accountant', 'Tokyo', 36, 5689, '01.jpg'),
(2, 'Mark Oto Ednalan', 'Chief Executive Officer (CEO)', 'London', 56, 5648, '02.jpg'),
(3, 'Jacob thompson', 'Junior Technical Author', 'San Francisco', 23, 5689, '03.jpg'),
(4, 'cylde Ednalan', 'Software Engineer', 'Olongapo', 23, 54654, '04.jpg'),
(5, 'Rhona Davidson', 'Software Engineer', 'San Francisco', 26, 5465, '05.jpg'),
(6, 'Quinn Flynn', 'Integration Specialist', 'New York', 53, 56465, '06.jpg'),
(8, 'Tiger Nixon', 'Software Engineer', 'London', 45, 456, '07.jpg'),
(9, 'Airi Satou', 'Pre-Sales Support', 'New York', 25, 4568, '08.jpg'),
(10, 'Angelica Ramos', 'Sales Assistant', 'New York', 45, 456, '09.jpg'),
(11, 'Ashton updated', 'Senior Javascript Developer', 'Olongapo', 45, 54565, '01.jpg'),
(12, 'Bradley Greer', 'Regional Director', 'San Francisco', 27, 5485, '02.jpg'),
(13, 'Brenden Wagner', 'Javascript Developer', 'San Francisco', 38, 65468, '03.jpg'),
(14, 'Brielle Williamson', 'Personnel Lead', 'Olongapo', 56, 354685, '04.jpg'),
(15, 'Bruno Nash', 'Customer Support', 'New York', 36, 65465, '05.jpg'),
(16, 'cairocoders', 'Sales Assistant', 'Sydney', 45, 56465, '06.jpg'),
(17, 'Zorita Serrano', 'Support Engineer', 'San Francisco', 38, 6548, '07.jpg'),
(18, 'Zenaida Frank', 'Chief Operating Officer (COO)', 'San Francisco', 39, 545, '08.jpg'),
(19, 'Sakura Yamamoto', 'Support Engineer', 'Tokyo', 48, 5468, '05.jpg'),
(20, 'Serge Baldwin', 'Data Coordinator', 'Singapore', 85, 5646, '05.jpg'),
(21, 'Shad Decker', 'Regional Director', 'Tokyo', 45, 4545, '05.jpg');

ALTER TABLE `employee`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `employee`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=22;

index.php
//index.php
<!doctype html>
<html>
<head>
<title>Update Multiple Selected Records PHP Mysql and Jquery Ajax</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body >
<?php 
include "dbcon.php";
	$alert= "";
        if(isset($_POST['but_update'])){
            if(isset($_POST['update'])){
                foreach($_POST['update'] as $updateid){

                    $name = $_POST['name_'.$updateid];
                    $position = $_POST['position_'.$updateid];
                    $office = $_POST['office_'.$updateid];
                    $age = $_POST['age_'.$updateid];
                    $salary = $_POST['salary_'.$updateid];

                    if($name !='' && $position != '' ){
                        $updateUser = "UPDATE employee SET 
                            name='".$name."',position='".$position."'
                        WHERE id=".$updateid;
                        mysqli_query($conn,$updateUser);
                    }
                    
                }
				$alert = '<div class="alert alert-success" role="alert">Records successfully updated</div>';
            }
        }
 ?>
        <div class='container'>
			<h1>Update Multiple Selected Records using PHP Mysql and Jquery Ajax</h1>
            <form method='post' action=''><?php echo $alert; ?>
                <p><input type='submit' value='Update Selected Records' class="btn btn-success" name='but_update'></p>
				<table class="table table-bordered">
                    <tr style='background: whitesmoke;'>
                        <!-- Check/Uncheck All-->
                        <th><input type='checkbox' id='checkAll' > Check</th>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Salary</th>
                    </tr>
                    <?php 
                    $query = "SELECT * FROM employee order by name asc limit 10";
                    $result = mysqli_query($conn,$query);

                    while($row = mysqli_fetch_array($result) ){
                        $id = $row['id'];
                        $name = $row['name'];
                        $position = $row['position'];
                        $office = $row['office'];
                        $age = $row['age'];
                        $salary = $row['salary'];
                    ?>
                        <tr>
                            <td><input type='checkbox' name='update[]' value='<?= $id ?>' ></td>
                            <td><input type='text' name='name_<?= $id ?>' value='<?= $name ?>' ></td>
                            <td><input type='text' name='position_<?= $id ?>' value='<?= $position ?>' ></td>
                            <td><input type='text' name='office_<?= $id ?>' value='<?= $office ?>' ></td>
                            <td><input type='text' name='age_<?= $id ?>' value='<?= $age ?>' ></td>
                            <td><input type='text' name='salary_<?= $id ?>' value='<?= $salary ?>' ></td>
                        </tr>
                    <?php
                    }
                    ?>
                </table>
            </form>
        </div>
        <script type="text/javascript">
            $(document).ready(function(){
                // Check/Uncheck ALl
                $('#checkAll').change(function(){
                    if($(this).is(':checked')){
                        $('input[name="update[]"]').prop('checked',true);
                    }else{
                        $('input[name="update[]"]').each(function(){
                            $(this).prop('checked',false);
                        }); 
                    }
                });
                // Checkbox click
                $('input[name="update[]"]').click(function(){
                    var total_checkboxes = $('input[name="update[]"]').length;
                    var total_checkboxes_checked = $('input[name="update[]"]:checked').length;

                    if(total_checkboxes_checked == total_checkboxes){
                        $('#checkAll').prop('checked',true);
                    }else{
                        $('#checkAll').prop('checked',false);
                    }
                });
            });
        </script>
</body>
</html>

Related Post