Demo Online
- 5 years ago
- Zaid Bin Khalid
- 8149 Views
-
8
JQuery is a power full library you can download JQuery form here. And include CDN into your project with <script> tag. So, in this tutorial, I am going to show you how we can send ajax request with JQuery. As I already write a post in which I show you how you can send images or files with JQuery.
How to select and upload image file using JQuery Ajax you can visit this post to understand the process how you can send form data with files.
Step 1
We need to create the HTML form with submit button and some input fields. When user submits the form we use AJAX request that carries form data without refreshing web page.
We create the HTML form with Bootstrap below snippet shows how to create a form.
<div class="container">
<div class="row justify-content-md-center">
<div class="col border border-danger">
<h1>Ajax Submition</h1>
<form method="post" id="userform" onsubmit="return false;">
<div class="form-group">
<label>Your Name</label>
<input type="text" name="yourname" id="yourname" class="form-control" required />
</div>
<div class="form-group">
<label>Your Email</label>
<input type="email" name="youremail" id="youremail" class="form-control" required />
</div>
<div class="form-group">
<button type="submit" name="submitbtn" class="btn btn-danger">Submit</button>
</div>
</form>
</div>
<div class="col">
<div id="msg"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
Above code is an example of HTML form develop in Bootstrap 4. Now you need a JQuery script that send form data on submit.
I assign an ID to form that is used to handle form data on submit. And use HTML onSubmit attribute to block default behavior of form. In this example I create #msg id to show ajax call back result.
$(document).ready(function(e) {
$("#userform").on("submit",function(){
$.ajax({
type:'POST',
data:$("#userform").serialize(),
url:'ajax-action.php',
success: function(data){
$("#msg").html(data);
}
});
});
});
Demo Online
- 5 years ago
- Zaid Bin Khalid
- 8149 Views
-
8