How to Submit Form Using Ajax in PHP?

Apr 05, 2022 . Admin



Hello dev,

I am going to explain you How to use Form Submit Using Ajax Example. You will learn How to use ajax to submit a form in php

This article will give you simple example of ajax form submit php mysql Code. We will use get simple How To Use ajax form submit in PHP & MySQL.

I will give you simple Example of How to use form submit in PHP using Ajax.

So, let's see bellow solution:

index.php
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title></title>
</head>
<body>

    <div class="container">
        <div class="card mt-3">
            <div class="card-header">
              <center>
               <h3>Form Submit using Ajax in PHP MySQL Example</h3>
              </center>
            </div>
            <div>
                <form class="p-2" method="post" action="insert_form_data.php">
                    <div class="form-group">
                        <label>Name</label>
                        <input type="text" name="name" class="form-control" placeholder="Name">
                    </div>
                    <div class="form-group">
                        <label>Email address</label>
                        <input type="email" name="email" class="form-control" placeholder="Email">
                    </div>
                    <button type="submit" class="btn btn-primary" class="submit">Submit</button>
                </form> 
            </div>
            <div class="card-body" id="table">

            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            function lodetable(){
                    $.ajax({
                    url : "table.php",
                        type : "GET",
                        success : function(data){
                            $('#table').html(data);
                        }
                    });
                }
            lodetable();

            $('form').on('submit', function (e) {
                e.preventDefault();
                $.ajax({
                    type: 'post',
                    url: 'insert_form_data.php',
                    data: $('form').serialize(),
                    success: function () {
                        alert('Data Inserted Successfully');
                        lodetable();
                        $("form").trigger("reset");
                    }
                });
            });

        });
    </script>

</body>
</html>
insert_from_data.php
<?php 

    $conn = mysqli_connect("localhost","root","root","form");

    $name = $_POST['name'];
    $email = $_POST['email'];

    $query = "INSERT INTO ajax_form(name,email) VALUES ('$name','$email')";

    $result = mysqli_query($conn,$query);

 ?>
table.php
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>

    <?php 
        $conn = mysqli_connect("localhost","root","root","form");
        $query = "SELECT * FROM ajax_form";
        $result = mysqli_query($conn,$query);
    ?>

    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Email</th>
            </tr>
        </thead>
        <tbody>
            <?php while($row = mysqli_fetch_assoc($result)){ ?>
                <tr>
                    <th scope="row"><?php echo $row['id']; ?></th>
                    <td><?php echo $row['name']; ?></td>
                    <td><?php echo $row['email']; ?></td>
                </tr>
            <?php } ?>
        </tbody>
    </table>

</body>
</html>
Output:

It will help you...
#PHP