pTutorial

New way to learn Programming

JQuery get all form data

How to get the value of complete form using JQuery.

In this article I showed you on how to get the complete form data using JQuery. You can easily get the value of single field as previous discussed but if you are using the previous method at the time dealing ten or more field in the form, the code will be too long. Today I am goingto show you how to get the complete form values using JQuery serialize method.

Jquery complete form data example


<!DOCTYPE html>
<html>
<head>
<script src="http://freeonlinecompiler.ptutorial.com/
js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="
http://freeonlinecompiler.ptutorial.com
/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="col-sm-4">
<h2>Jquery Complete form Data</h2>
<form id="form" action="#">
<div class="form-group">
<label>First Name :  </label>
<input class="form-control" name="name">
</div>
<div class="form-group">
<label>Last Name  :</label>  
<input type="text" class="form-control" name="namel">
</div>
<div class="form-group">
<label>Address :</label>     
<input type="text" class="form-control" name="address">
</div>
<div class="form-group">
<label>Contact No. :</label> 
<input type="text" class="form-control" name="contact">
</div>
<div class="form-group">
<label>Country: </label>     
<input type="text" class="form-control" name="country">
</div>
<div class="form-group">
<label>City: </label>        
<input type="text" class="form-control" name="city">
</div>
</form>
<button type="button" class="btn btn-default" 
id="sub">Serialize</button>
</div>
<script>
$("#sub").click(function(){
uk = $("#form").serialize();
alert(uk);
});
</script>
</div>
</body>
</html>


Download

Explanation

The serialize method automatically gets all the data inside the form through the id. One more thing to remember at the time of getting the value of form using serialize method, keep name attribute in each and every form field.

Through the serialize function you can get the form values and append as Query parameter in the URL see the below example.

See Also


QUOTES OF THE DAY

Well-begun is half done.

LIKE ON FACEBOOK

+1 ON GOOGLE

SHARE ON TWITTER