article

Monday, March 28, 2022

Submit Form using Jquey AJAX with PHP MySQLi

Submit Form using Jquey AJAX with PHP 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 `members` (
  `id` int(11) NOT NULL,
  `firstname` varchar(30) NOT NULL,
  `lastname` varchar(30) NOT NULL,
  `address` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

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

ALTER TABLE `members`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
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
//index.php
<!DOCTYPE html>
<html>
<head>
    <title>Submit Form using Jquey AJAX with PHP 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="card card-body bg-light">
        <div class="row">
            <div class="col-lg-12">
                <h2><center>Submit Form using Jquey AJAX with PHP MySQLi</center></h2>
            </div>
        </div>
        <form id="form">
        <div class="row">
            <div class="mb-3">
                <label class="form-label">Firstname:</label>
                <input type="text" name="firstname" class="form-control">
            </div>
        </div>
        <div class="row">
            <div class="mb-3">
                <label class="form-label">Lastname:</label>
                <input type="text" name="lastname" class="form-control">
            </div>
        </div>
        <div class="row">
            <div class="mb-3">
                <label class="form-label">Address:</label>
                <input type="text" name="address" class="form-control">
            </div>
        </div>
        </form>
        <div class="row">
            <div class="col-lg-12">
                <button type="button" class="btn btn-primary pull-right" id="submit">Submit</button>
            </div>
        </div>
    </div>
    <div class="row" style="margin-top:20px;">
        <div id="table">
        </div>
    </div>
</div>
<script>
$(document).ready(function(){
 
    showTable();
 
    $('#submit').click(function(){
        var form=$('#form').serialize();
        $.ajax({
            url:"add.php",
            method:"POST",
            data:form,
            success:function(){
                showTable();
                $('#form')[0].reset();
            }
        });
    });
});
 
function showTable(){
    $.ajax({
        url:"fetch.php",
        method:"POST",
        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 = mysqli_connect("localhost","root","","testingdb");
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
  
?>
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>
                <th>Address</th>
            </thead>
            <tbody>
                <?php
                    $query=mysqli_query($conn,"select * from members order by id desc");
                    while($row=mysqli_fetch_array($query)){
                    ?>
                    <tr>
                        <td><?php echo $row['firstname']; ?></td>
                        <td><?php echo $row['lastname']; ?></td>
                        <td><?php echo $row['address']; ?></td>
                    </tr>
                    <?php
                    }
                ?>
            </tbody>
        </table>
        <?php   
    }
?>
add.php
?
1
2
3
4
5
6
7
8
9
10
11
//add.php
<?php
    include('conn.php');
    if(isset($_POST['firstname'])){
        $firstname=$_POST['firstname'];
        $lastname=$_POST['lastname'];
        $address=$_POST['address'];
 
        mysqli_query($conn,"insert into members (firstname, lastname, address) values ('$firstname', '$lastname', '$address')");
    }
?>

Posted by ednalan at 2:24 AM . Under , .

Related Post