Here, we are going to start about submit a form without page refresh using Ajax jQuery and Php with the example. Also, explain and given some code to ajax serialize form data example without reloading the page. As well as, submit form and show results on the same page without a refresh.
Thus, showing the best method to use this code every form and submit data without page refresh with an example result show the same page instantly by ajax using jquery and PHP.
let’s see examples in the below section step by step and also explain all other main points finds and learn here.
Table of Contents
Submit Form without Page Refresh using Ajax jQuery and PHP
Firstly, we have to create an HTML form structure to implement submit form data in the database without reloading the page using jQuery.
Step 1:- Created page index.php and add this HTML form.
<!DOCTYPE html>
<html>
<head>
<title>Ajax form submit without reloading page</title>
<style type="text/css">
form {
text-align: center;
padding: 26px;
margin: 11px;
}
div {
padding: 15px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>This is the simple form using Ajax</h1>
<form method="POST" action="#">
<div>
<label>Name</label>
<input type="text" id="name" name="name">
</div>
<div>
<label>Mobile No</label>
<input type="text" id="mobile" name="mobno">
</div>
<div>
<label>address</label>
<input type="text" id="address" name="address">
</div>
<div>
<label>city</label>
<input type="text" id="city" name="city">
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(event){
event.preventDefault();
var name = $('#name').val();
var mobile = $('#mobile').val();
var address = $('#address').val();
var city = $('#city').val();
$.ajax({
type: "POST",
url: "upload.php",
data: { name:name, mobile:mobile, address:address, city:city },
dataType: "json",
success: function(result){
}
});
});
});
</script>Step 2: Secondly, we created a page for upload.php table data using ajax see below side. Here, available code and copy this code paste your upload file all code.
<?php
// Database connection
$conn = new mysqli('localhost', 'username', 'password', 'databasename');
// Insert data Query
$sql = "INSERT INTO formdata ( name, mobile, address, city )
VALUES ( '".$_POST['name']."' , '".$_POST['mobile']."', '".$_POST['address']."', '".$_POST['city']."')";
if ($conn->query($sql) === TRUE) {
echo "Insert your form record successfully";
}
?>Now, I describe this code. Afterward, you created two files on your project first file showing form and another file backend process to upload form data.
Above, we share a full example with the code you can apply anywhere and modify your data while submitting the form with the reloading page. Usually, in this code available some event to get data in this documentation
So, here you can see the output of the form example ajax submit the form without reloading the page.
As well as, we have provided other ways to use jquery ajax form submit example in the below section. So, I am using a form for submitting data examples without page refresh this is the best basic example.
Insert Data in PHP using jQuery ajax without page refresh
Similarly, like above show a form and implement jquery code, and passing data to another padge without load page. Then, could be added insert data query in PHP code with the help of ajax. So then, showing code here.
$conn = new mysqli('localhost', 'username', 'password', 'databasename');
// Insert data Query
$sql = "INSERT INTO formdata ( name, mobile, address, city )
VALUES ( '".$_POST['name']."' , '".$_POST['mobile']."', '".$_POST['address']."', '".$_POST['city']."')";
if ($conn->query($sql) === TRUE) {
echo "Insert your form record successfully";
} Afterward, PHP code for insert data using ajax with the SQL query. Now we have to given another example of jquery ajax form submit example PHP. Also, learn more about ajax.
jQuery get value from serialized data
Here, get all form value only use a function of serialize(). Accordingly, they access all input value from form with the post method. For example, you do mention a id on the form see this.
<form method="POST" id="formexample" action="#">
<div>
<label>Name</label>
<input type="text" id="name" name="name">
</div>
<div>
<label>Mobile No</label>
<input type="text" id="mobile" name="mobno">
</div>
<div>
<label>address</label>
<input type="text" id="address" name="address">
</div>
<div>
<label>city</label>
<input type="text" id="city" name="city">
</div>
<button type="submit">Submit</button>
</form>After, we declare an id name is for example on the main form. After that, add this id with the serialize function using ajax.
$.ajax({
type: "POST",
url: "upload.php",
data: $("#form-search").serialize();
dataType: "json",
success: function(result){
}
});Thus, get form input value by the post method to anywhere as you want to define page path in the URL. Under, the added $_POST[‘name’] as well as get all value using PHP and insert data with the help of this code.
Now, one more thing about when you insert data. So, there can add any response to the result.
Submit Form and Show Results on Same Page without Refresh
Usually, in this method, you must get results on the same page without page reload see this code.
$.ajax({
type: "POST",
url: "upload.php",
data: $("#form-search").serialize();
dataType: "json",
success: function(result){
$('#taable').html(result);
}
});So, where you want to show the result then give an id and paste the response using this code.
Conclusion
Finally, if you have any queries and suggestions regarding ask us. Thus, we can provide the best other methods of submitting forms without page refresh using ajax jquery and PHP.
Also, given some examples with the help of code and describe code. Also, you can learn the relative topic with the example check it JavaScript Change Image onclick Event
Just now learning the basics. This really helped, just simple enough for me to get the main ideas, and so that I could add to it as I learned more.
very nice post, i certainly love this website, keep on it