Skip to main content

using jquery serialize method submit form



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.









Labels:

Comments

Post a Comment

Popular posts from this blog

Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links

Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links user want to share any information then use following code  and read step by step Profile Share Fixing the Thumbnail Image, Title and Description for Shared Links if you want share profile on following social link : 1-Facebook 2-twitter.com 3-LinkedIn 4-google +, Code link : https://drive.google.com/open?id=1IzTZZh_0euDqFSHL_vPRiQePlNTw3h-q Demo link : http://freeteachnology.hol.es/socialshare/ To modify a page's thumbnail image, description, and additional metadata for these services, you can provide meta tags in the HTML code of the page.Implementing Open Graph Meta Tags You can implement meta tags in a number of ways. In content management systems might  be allow you to modify a page's meta tags , then use following code in meta section of your project code, <link href="bootstrap.min.css" rel="stylesheet"> <link href="bootstrap-tour.m...
Post a Comment
Read more

using PDO database connection add,update,delete,edit operation

PDO advantage : 1-Object Oriented 2-Bind parameters in statements (security) 3-Allows for prepared statements and rollback functionality (consistency) 4-Throws catcheable exceptions for better error handling (quality) 5-Exception mode; no need to check error state after each API call. It's best to tell PDO how you'd like the data to be fetched. You have the following options: 1-PDO::FETCH_ASSOC: returns an array indexed by column name. 2-PDO::FETCH_BOTH: (default):returns an array indexed by both column name and number. 3-PDO::FETCH_BOUND:Assigns the values of your columns to the variables set with the ->bindColumn() method. 4-PDO::FETCH_CLASS: Assigns the values of your columns to properties of the named class. It will create the properties if matching properties do not exist. 5-PDO::FETCH_INTO:Updates an existing instance of the named class. 6-PDO::FETCH_LAZY: Combines. 7-PDO::FETCH_BOTH/PDO:FETCH_OBJ, creating the object variable names as t...
Post a Comment
Read more

GUID for globally unique identifier

How to create GUID in php 1-guid stands for globally unique identifier generally used to create random unique strings in php, create access token in php 2-Mostly use of GUID for generating access token, generate unique id, generating unique string in php. Using this article how to create guide in php you can create a random string for any use to keep unique 3-GUID consists of alphanumeric characters only and is grouped in five groups separated by hyphens as seen in this example: 3F2504E0-4F89-11D3-9A0C-0305E82C3301 Eg:- <?php /** * Generate Globally Unique Identifier (GUID) * E.g. 2EF40F5A-ADE8-5AE3-2491-85CA5CBD6EA7 * * @param boolean $include_braces Set to true if the final guid needs * to be wrapped in curly braces * @return string */ function generateGuid($include_braces = false) { if (function_exists('com_create_guid')) { if ($include_braces === true) { return com_create_guid(); } else { return substr(com_cr...
2 comments
Read more