What is jQuery :
JQuery is a JavaScript library which is small, quick, with tons of features that makes things such as animation, event handling and manipulation in web browser easy to use and handle.
1-jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto -
2-Write less, do more.
3-jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
Following feature of jQuery :
1-DOM manipulation − The jQuery made it easy to select DOM elements, traverse them and modifying their content by using cross-browser open source selector engine called Sizzle.
2-Event Handling : The jQuery offers an elegant way to capture a wide variety of events,such as click,over event,
3-Ajax Support :
jQuery support ajax technology,
4-Lightweight :he jQuery is very lightweight library - about 19KB in size ( Minified and gzipped ).
5-Animations − The jQuery comes with plenty of built-in animation effects.
6-Cross Browser Support − The jQuery has cross-browser support, and works well in IE and all.
FormData :
1-HTML5 introduces FormData to allow developers to build forms objects dynamically.
2-send form object via Ajax,
3-contentType always false because otherwise boundary string will be missing,
Syntax :
contentType :false
4-processData is set as false because otherwise formData convert data into string,
Syntax :
processData :false
5-jQuery will make FormData cross browser. Whilst most browsers have supported FormData since the stone age (Chrome 7, Firefox 4.0 and Safari 5),
Syntax :
var formData = new FormData(id-of-form);
above syntax define FormData() function and create object using new keyword,
Demo link :
http://freeteachnology.hol.es/jqueryFromData/
Code link :
https://drive.google.com/open?id=0BxmTZPVcu72faXpZcmNuNmhQZTQ
following example call form data and post value show on same page : -
1-heaeder.php,
2-footer.php,
3-index.php,
4-action.php
1-header.php :
include cdn link and css :
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery fromData Ajax Call</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <!-- start:header --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <a class="navbar-brand" href="#">Free Teachnology</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home <span class="sr-only"></span></a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </br></br></br> <!-- end:header →
2-footer.php :
<script>
// $(".errorMsg").alert('close');
$(".errorMsg").slideUp(2000);
</script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Start::footer -->
<footer>
<div class="footer footer-bottom">
<div class="container">
<div class="text-muted ">
<a href="https://freeteachnology.blogspot.in/" >Free Teachnology</a>
</div>
<p class="pull-left"> Copyright © <?php echo date('Y');?>. Design and Develop by - Disuza Jen. </p>
<div class="pull-right">
<ul class="nav nav-pills payments">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-google"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-link"></i></li>
</ul>
</div>
</div>
</div>
<!--/.footer-bottom-->
</footer>
<!-- End::footer -->
<style type="text/css">
.footer-bottom {
margin-top:220px;
background: #E3E3E3;
border-top: 1px solid #DDDDDD;
padding-top: 10px;
padding-bottom: 10px;
}
.footer-bottom p.pull-left {
padding-top: 6px;
}
</style>
</body>
</html>
3-index.php :
index.php file call ajax function and define formData function as follow :
<?php include('header.php'); ?>
<body>
<br><br><br>
<div class="cleafix"></div>
<div class="container">
<div class="alert alert-info">
<strong>Hi..</strong> jQuery fromData post data.
</div>
</div>
<div class="container text-center card">
<div class="col-md-6">
<form enctype="multipart/form-data" name="fromSubmit" id="fromSubmit">
<label for="name">First Name</label>
<input type="text" name="fname" id="fname" class="form-control" placeholder="Enter First Name..." />
<div class="clearfix"></div>
<label for="name">Last Name</label>
<input type="text" name="lname" id="lname" class="form-control" placeholder="Enter Last Name..." />
<div class="clearfix"></div>
</br>
<button type="button" name="submit" id="submit" class="btn btn-primary">Singup</button>
</form>
</div>
<div class="clearfix"></div>
<div class="col-md-6" id="result">
</div>
</div>
</br>
<?php include('footer.php'); ?>
<script>
$("#submit").click(function(){
//form data and create object
var formData = new FormData($('#fromSubmit')[0]);
$.ajax({
type: 'post',
url : 'action.php',
data : formData,
async: false,
cache: false,
contentType: false,
processData: false,
success : function(data){
$("#result").append(data);
},
error : function(error){
console.log(error);
}
});
});
</script>
above example form data post and submit form request in action.php file, action.php include jsondata encode and send again ajax call request
4-action.php
<?php
/*
*Post value::-
*/
echo json_encode($_POST);
exit();
?>
<?php
/*
*Post value::-
*/
echo json_encode($_POST);
exit();
?>
thanks for supporting to me and i hope that code is like you and enjoy,if you like please comment and share,
Thanks,
Disuza Jen
Comments