we will show, however you’ll login and registration that works with page reload as submit form without page refresh using jQuery ajax.
Another good way of utilizing jQuery to boost user expertise is to not simply validate, however to submit your form entirely while not a page refresh.
during this Example we justify the way to submit form while not page refresh using javascript ajax. ajax (Asynchronous JavaScript and XML) is that the art of exchanging information with a server, and change components of an internet page – while not reloading the complete page.
submit form without page refresh using jQuery ajax
In this Example we will be able to show you the way straightforward it’s to try and do simply that – submit a registration form while not page refresh victimization javascript, ajax! (The actual information submitting work is completed by a php script or php page that processes within the background). Let’s start submits form using javascript on button click.
Building an easy registration form submit while not page refresh victimization jquery mythical being.
jQuery AJAX Form Submit PHP MySQL
In this example, we’ve an easy registration form with name, email, and sign. the shape submits all the fields to a php script while not page refresh victimization javascript, ajax, php and mysql.
No encryption methodology here introduced as a result of for straightforward perceive the logic behind this for beginners with submits form using javascript
. In approaching week i will be able to describe this with validation and password encryption.
First Create a Database Connection File
<?php
$servername='localhost';
$username='root';
$password='gjgDFg9889';
$dbname = "pakainfo";
$conn=mysqli_connect($servername,$username,$password,"$dbname");
if(!$conn){
die('Could not Connect MySql Server:' .mysql_error());
}
?>
Create An Ajax Form in PHP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to send data to MySQL with AJAX + javascript + PHP | Pakainfo.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>
<div class="container">
<div class="row">
<div class="col-lg-8 col-offset-2">
<div class="page-header">
<h2>javascript Ajax Form Submit Example In PHP - www.pakainfo.com</h2>
</div>
<p>Please fill all fields in the form</p>
<p id="show_message" style="display: none">Form data sent. Thanks for your comments.We will update you within 24 hours. </p>
<span id="error" style="display: none"></span>
<form action="javascript:void(0)" method="post" id="ajax-form">
<div class="form-group">
<label>Name</label>
<input type="text" name="name" id="name" class="form-control" value="" maxlength="50" >
</div>
<div class="form-group ">
<label>Email</label>
<input type="email" name="email" id="email" class="form-control" value="" maxlength="30" >
</div>
<div class="form-group">
<label>contact</label>
<input type="text" name="contact" id="contact" class="form-control" value="" maxlength="12" >
</div>
<input type="submit" class="btn btn-primary" name="submit" value="submit">
</form>
</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();
//name required
var name = $("input#name").val();
if(name == ""){
$("#error").fadeIn().text("Name required.");
$("input#name").focus();
return false;
}
// email required
var email = $("input#email").val();
if(email == ""){
$("#error").fadeIn().text("Email required");
$("input#email").focus();
return false;
}
// contact number required
var contact = $("input#contact").val();
if(contact == ""){
$("#error").fadeIn().text("contact number required");
$("input#contact").focus();
return false;
}
// ajax
$.ajax({
type:"POST",
url: "project_folder_name/ajax-form-save.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>
Also Read: submits form using javascript in php
Create Ajax Form PHP File
<?php
require_once "db.php";
$name = mysqli_real_escape_string($conn, $_POST['name']);
$email = mysqli_real_escape_string($conn, $_POST['email']);
$contact = mysqli_real_escape_string($conn, $_POST['contact']);
if(mysqli_query($conn, "INSERT INTO customers(name, email, contact) VALUES('" . $name . "', '" . $email . "', '" . $contact . "')")) {
echo '1';
} else {
echo "Error: " . $sql . "" . mysqli_error($conn);
}
mysqli_close($conn);
?>
php file for submit data into database