Skip to content

All topics  /  PHP

How to Submit Form using Ajax in PHP?

PHP ·

Teams applying “How to Submit Form using Ajax in PHP?” in a production project can use this reference page to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the PHP project and test it against the project’s actual database and runtime.

Hi friends,

In this post, we will learn How to Make a Form Submit in ajax PHP. i explained simply step by step How To Use Form Submit using Ajax in PHP & MySQL. Here you will learn how to Form submit to database Using ajax. This tutorial will give you simple example of ajax form submit php mysql Code Example.

I will give you simple Example of How to make a ajax form submit in PHP.

So let's see bellow example:

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/[email protected]/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_form_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:

I hope it will help you....

More on this topic