article

Tuesday, April 5, 2022

Jquery Ajax Adding Multiple Rows with PHP OOP and Mysqli

Jquery Ajax Adding Multiple Rows with PHP OOP and Mysqli

Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js

Database Table

CREATE TABLE `multiplerow_members` (
  `id` int(11) NOT NULL,
  `firstname` varchar(30) NOT NULL,
  `lastname` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `multiplerow_members` (`id`, `firstname`, `lastname`) VALUES
(1, 'Airi ', 'Sato'),
(2, 'Bourto', 'Usumaki');

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

ALTER TABLE `multiplerow_members`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

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
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
//index.php
<!DOCTYPE html>
<html>
<head>
    <title>Jquery Ajax Adding Multiple Rows with PHP OOP and Mysqli</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2>Jquery Ajax Adding Multiple Rows with PHP OOP and Mysqli</h2>
            <h2>Members Table</h2>
            <div id="table"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <h2>Add Form</h2>
            <form id="addForm">
                <hr>
                <div class="row">
                    <div class="col-md-2">
                        <label style="position:relative; top:7px;">Firstname:</label>
                    </div>
                    <div class="col-md-10">
                        <input type="text" name="firstname[]" class="form-control">
                    </div>
                </div>
                <div style="height:10px;"></div>
                <div class="row">
                    <div class="col-md-2">
                        <label style="position:relative; top:7px;">Lastname:</label>
                    </div>
                    <div class="col-md-10">
                        <input type="text" name="lastname[]" class="form-control">
                    </div>
                </div>
                <hr>
                <div id="newrow"></div>
                <div class="row">
                    <div class="col-md-12">
                        <button type="button" id="save" class="btn btn-primary"> Save</button>
                        <button type="button" id="newbutton" class="btn btn-primary"> Add New</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
$(document).ready(function(){
    showTable();
 
    $('#newbutton').click(function(){
        $('#newrow').slideDown();
        var newrow = '<hr>';
            newrow = '<div class="row">';
            newrow += '<div class="col-md-2"><label style="position:relative; top:7px;">Firstname:</label></div>';
            newrow += '<div class="col-md-10"><input type="text" name="firstname[]" class="form-control"></div>';
            newrow += '</div>';
            newrow += '<div style="height:10px;"></div>';
            newrow += '<div class="row">';
            newrow += '<div class="col-md-2"><label style="position:relative; top:7px;">Lastname:</label></div>';
            newrow += '<div class="col-md-10"><input type="text" name="lastname[]" class="form-control"></div>';
            newrow += '</div>';
            newrow += '<hr>';     
        $('#newrow').append(newrow);   
    });
 
    $('#save').click(function(){
        var addForm = $('#addForm').serialize();
        $.ajax({
            type: 'POST',
            url: 'add.php',
            data: addForm,
            success:function(data){
                if(data==''){
                    showTable();
                    $('#addForm')[0].reset();
                    $('#newrow').slideUp();
                    $('#newrow').empty();
                }
                else{
                    showTable();
                    $('#addForm')[0].reset();
                    $('#newrow').slideUp();
                    $('#newrow').empty();
                    alert('Rows with empty field are not added');
                }
                 
            }
        });
    });
 
});
 
function showTable(){
    $.ajax({
        type: 'POST',
        url: 'fetch.php',
        data:{
            fetch: 1,
        },
        success:function(data){
            $('#table').html(data);
        }
    });
}
</script>
</body>
</html>
conn.php
?
1
2
3
4
5
6
7
8
//conn.php
<?php
$conn = new mysqli("localhost", "root", "", "testingdb");
  
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}
?>
add.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//add.php
<?php
    include('conn.php');
    if(isset($_POST['firstname'])){
        $firstname = $_POST["firstname"];
        $lastname = $_POST["lastname"];
 
        for($count = 0; $count<count($firstname); $count++){
            $firstname_clean = mysqli_real_escape_string($conn, $firstname[$count]);
            $lastname_clean = mysqli_real_escape_string($conn, $lastname[$count]);
 
            if($firstname_clean != '' && $lastname_clean != ''){
                $conn->query("insert into multiplerow_members (firstname, lastname) values ('".$firstname_clean."', '".$lastname_clean."')");
            }
            else{
                echo "1";
            }
        }
    }
 
?>
fetch.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
27
28
29
//fetch.php
<?php
    include('conn.php');
    if(isset($_POST['fetch'])){
        ?>
            <table class="table table-bordered table-striped">
                <thead>
                    <th>Firstname</th>
                    <th>Lastname</th>
                </thead>
                <tbody>
                    <?php
                        include('conn.php');
                        $query=$conn->query("select * from multiplerow_members");
                        while($row=$query->fetch_array()){
                            ?>
                            <tr>
                                <td><?php echo $row['firstname']; ?></td>
                                <td><?php echo $row['lastname']; ?></td>
                            </tr>
                            <?php
                        }
                    ?>
                </tbody>
            </table>
        <?php
    }
 
?>

Posted by ednalan at 12:21 AM . Under , .

Related Post