PHP - jQuery Ajax Form Submit Example

PHP , jquery

Nicesnippets

1108

22-11-2019


PHP - jQuery Ajax Form Submit Example

Hi Dev,

Today I will show how to write ajax post request in php mysql. you can easily write jquery ajax request with php mysql.

Here, i gave you simple example of jquery ajax form submit in php mysql.

This blog helps to you submit ajax form in php with mysql database when we will store form data into database using mysql database and using ajax then we will follow bellow step.

First you can create database and create table to store your data.

Create Form In PHP

In this step we will create form. form in you 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 | Tutsmake.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

This code used to store form data into 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);

?>

I hope it will help you...


Recommended Posts