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.
serialize() :
Encode a set of form elements as a string for submission.
The .serialize() method creates a text string in standard URL-encoded notation. It can act on a jQuery object that has selected individual form controls, such as <input>, <textarea>, and <select>: $( "input, textarea, select" ).serialize();
The serialize() method creates a URL encoded text string by serializing form values.
You can select one or more form elements (like input and/or text area), or the form element itself.
The serialized values can be used in the URL query string when making an AJAX request.
The serialize( ) method serializes a set of input elements into a string of data.
Syntax :
$.serialize( )
Demo link :
http://freeteachnology.hol.es/serialise/
Code link :
https://drive.google.com/open?id=0BxmTZPVcu72fc2RadHliY3hhSzA
Post data as follow check :
<?php
if( $_REQUEST["name"] ) {
print_r($_REQUEST['']);
}
?>
pelase create following code :
1-header.php,
2-footer.php,
3-index.php,
1-header.php
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery serialize 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 :
<?php include('header.php'); ?>
<body>
<br><br><br>
<div class="cleafix"></div>
<div class="container">
<div class="alert alert-info">
<strong>Hi..</strong> jQuery serialize post data.
</div>
<div class="alert alert-warning">
<a href=" https://drive.google.com/open?id=0BxmTZPVcu72faXpZcmNuNmhQZTQ" class="btn btn-xs btn-warning pull-right" target="blank();">Click</a>
<strong> Code download link-</strong>
</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
$.ajax({
type: 'post',
url : 'action.php',
data : $("#fromSubmit").serialize(),
success : function(data){
$("#result").append(data);
},
error : function(error){
console.log(error);
}
});
});
</script>
now above exmaple on form submit call serialise metho to post data as string and access thoese post data as normal post element.
<?php $name=$_POST['']; ?>
if you like my blog then please comment and share it.
Thanks,
Disuza Jen.
Comments