jQuery Ajax Form Submit in PHP Example

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share
jQuery Ajax Form Submit in PHP

Hello Dev’s
Today in this blog I will show you how to submit a ajax post request in php mysql application. So here we can know how to easily write jquery ajax request with php mysql application. Here we will know about jQuery Ajax Form Submit in PHP.

Here, i will give you a very short and also a very simple example of jquery ajax form submit by php mysql.

Now in this blog will help you to know submit ajax form in php with mysql database. When we need store form data into database by using mysql database and also by using ajax then we can follow bellow step.

First we need to create a database and need to create a new table to store our data.

jQuery Ajax Form Submit in PHP

Create Form In PHP

Now in this step we need to create a form. Form in we can use field data store to database.

index.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>How to send data to MySQL with AJAX + jQuery + PHP | CodingsPoint.com</title>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.4.1.js"></script> 
    </head>
    <body style="background-color: #ec8b5e;">
        <div class="container">
            <div class="row mt-5">
                <div class="col-md-8 offset-2">
                    <div class="card">
                        <div class="card-header bg-info">
                            <h2><strong>jQuery Ajax Form Submit Example In PHP</strong></h2>
                        </div>
                        <div class="card-body">
                            <div id="show_message" class="alert alert-success" style="display: none">Success fully sent message </div>
	 
                            <div id="error" class="alert alert-danger" style="display: none"></div>

                            <form action="javascript:void(0)" method="post" id="ajax-form">
	 
                                <div class="form-group">
                                    <label>First Name</label>
                                    <input type="text" name="fname" id="fname" class="form-control" value="">
                                </div>
	         
                                <div class="form-group ">
                                    <label>Last Name</label>
                                    <input type="text" name="lname" id="lname" class="form-control" value="">
                                </div>
	         
                                <div class="form-group">
                                    <label>Comment</label>
                                    <input type="text" name="comment" id="comment" class="form-control" value="">
                                </div> 
	         
                                <div class="text-center">
                                    <input type="submit" class="btn btn-success btn-sm" name="submit" value="Save">
                                </div>
	                     
                            </form>  
                        </div>
                    </div>                
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(function($){
		 
            // hide messages 
            $("#error").hide();
            $("#show_message").hide();
		 
            // on submit...
            $('#ajax-form').submit(function(e){
		 
                e.preventDefault();
		 
                $("#error").hide();
		 
                //First name required
                var name = $("input#fname").val();
               if(name == ""){
                    $("#error").fadeIn().text("First Name Field required.");
                    $("input#fname").focus();
                    return false;
                }
		 
                // last name required
                var lname = $("input#lname").val();
                if(lname == ""){
                    $("#error").fadeIn().text("Last Name Field required");
                    $("input#lname").focus();
                    return false;
                }
		 
                // Comment number required
                var comment = $("input#comment").val();
                if(comment == ""){
                    $("#error").fadeIn().text("Comment Field required");
                    $("input#comment").focus();
                    return false;
                }
		 
                // ajax
                $.ajax({
                    type:"POST",
                    url: "/upload.php",
                    data: $(this).serialize(), // get all form field value in serialize form
                    success: function(){
                      $("#show_message").fadeIn();
                      //$("#ajax-form").fadeOut();
                    }
                });
            });  
		 
            return false;
        });
        </script>
    </body>
</html>

Create Ajax Form Submit File

Now in this code is use to store form data into our mysql database tabel name is contact_us

upload.php

<?php
    $servername='localhost';
    $username='root';
    $password='root';
    $dbname = "my_demo";
    $conn=mysqli_connect($servername,$username,$password,"$dbname");

    if(!$conn){
      die('Could not Connect MySql Server:' .mysql_error());
    }
    
    extract($_POST);
    
    if(mysqli_query($conn, "INSERT INTO contact_us(fname, lname, comment) VALUES('" . $fname . "', '" . $lname . "', '" . $comment . "')")) {
     echo '1';
     exit;
    } else {
       echo "Error: " . $sql . "" . mysqli_error($conn);
    }
 
    mysqli_close($conn);
	 
?>

Read Also : How to Send Mail by using Mailable Class in Laravel 8?

Thanks for read. I hope it help you. For more you can follow us on facebook.

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →