CodesJava

Easy learning with example program codes

jQuery Form


jQuery form is a part of jQuery AJAX methods. AJAX (Asynchronous JavaScript and XML) can be defined as an art of exchanging data with a server which includes loading data in the background and updating only the specific parts of a web page, without reloading the whole page.

With AJAX functionality, jQuery provides several methods to load the external data directly into the selected HTML elements of the web page, thus, provides a functionality of creating and submitting forms.

Some of these methods are:

  • jQuery serialize(): jQuery serialize() method is used to encode a set of form elements as a string for submission.
  • jQuery serializeArray(): jQuery serializeArray() method is used to encode a set of form elements as an array of names and values.

 

Example

<!DOCTYPE html>  
<html>  
<head>  
 <script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
<script>  
$(document).ready(function(){  
 $("button").click(function(){  
 var x = $("form").serializeArray();  
    	$.each(x, function(i, field){  
        	$("#results").append(field.name + ":" + field.value + " ");  
    	});
     	});  
});  
</script>  
</head>  
<body>  
<form action="">  
  First name: <input type="text" name="Mailid" value="897gmail.com"><br>  
  Last name: <input type="text" name="UserName" value="Paplu"><br>  
</form>  
<button>Serialize</button>  
<div id="results"></div>  
</body>  
</html>

Try it

JS Bin on jsbin.com

Sign Up/ Sign In
Ask a Question


Copyright © 2018 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki