Learn

Simple method to get all the form fields in jQuery

jQuery serialize()
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Simple method to get all the form fields in jQuery using serialize();

Hi Guys,

I am going to show a very simple jQuery method to get your long form fields data. It’s an easy command, but it saves a lot of time. Let start.

Create a HTML page called index.html. I am making a very big form with a lot of fields so it would be clear to you that it doesn’t matter how many fields you have in your form, by using jQuery method you will get every thing input text fields, hidden fileds, textarea, select box etc with a simple command.

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js”></script>
<style>
input, textarea, select {
padding: 5px;
width: 100%;
clear: right;
}
.container {
max-width: 990px;
}
</style>
</head>
<body>
<div class=”col-md-12″>
<div class=”container”>
<form name=”form_Blog” id=”form_Blog” method=”post” action=”” class=”form-horizontal form-row-seperated” enctype=”multipart/form-data”>
<input type=”hidden” name=”blog_id” value=”1″ id=”blog_id”>
<input type=”hidden” name=”Action” value=”AddBlog” id=”Action”>
<label>Heading: </label>
<input type=”text”name=”blog_title” id=”blog_title” placeholder=”” required>
<label>Sub Heading: </label>
<input type=”text”name=”blog_heading” id=”blog_heading” placeholder=””>
<label>Video Embed Code: </label>
<input type=”text”name=”video” id=”video” placeholder=””>
<label>Source Title: </label>
<input type=”text”name=”source_name” id=”source_name” placeholder=””>
<label>Link to Source: </label>
<input type=”text”name=”source_link” id=”source_link” placeholder=””>
<label>Client Name: </label>
<input type=”text”name=”client” id=”client” placeholder=””>
<label>Date of Project: </label>
<input type=”date”name=”projectdate” id=”projectdate” placeholder=””>
<label>Testimonial: </label>
<input type=”text”name=”testimonial” id=”testimonial” placeholder=””>
<label>Person Name: </label>
<input type=”text”name=”client_name” id=”client_name” placeholder=””>
<label>Description: </label>
<textarea name=”longdesc” id=”longdesc”></textarea>
<label>Short Description: </label>
<textarea name=”shortdesc” id=”shortdesc”></textarea>
<label>Status: <span class=”required”> * </span> </label>
<select name=”product[status]”>
<option value=””>Select…</option>
<option value=”1″>Published</option>
<option value=”0″>Not Published</option>
</select>
<label>Categories: </label>
<select name=”category” id=”category”>
<option value=”0″ selected>Self</option>
</select>
<label>Meta Title:</label>
<input type=”text”name=”page_title” id=”page_title” placeholder=””>
<label>Meta Keywords:</label>
<input type=”text”name=”page_keywords” id=”page_keywords” placeholder=””>
<label>Meta Description:</label>
<input type=”text”name=”page_description” id=”page_description” placeholder=””>
<label>Facebook: </label>
<input type=”text”name=”facebook” id=”facebook” placeholder=””>
<label>Twitter: </label>
<input type=”text”name=”twitter” id=”twitter” placeholder=””>
<label>LinkedIn: </label>
<input type=”text”name=”linkedin” id=”linkedin” placeholder=””>
<label>Youtube: </label>
<input type=”text”name=”youtube” id=”youtube” placeholder=””>
<label>Website: </label>
<input type=”text”name=”website” id=”website” placeholder=””>
<label>Instagram: </label>
<input type=”text”name=”instagram” id=”instagram” placeholder=””>
<button id=”save_blog” name=”save_blog”>Save</button>
</form>
</div>
</div>
<script src=”https://code.jquery.com/jquery-2.1.4.min.js”></script>
<script>
$(function(){
$(“#save_blog”).click(function(){
var dataString = $(“#form_Blog”).serialize();
alert (dataString);
});
});
</script>
</body>
</html>

Let me explain this code so you can understand what actually happens and how it works. We have a created a complete form in our HTML page and give an id “form_Blog”, and we created a submit button and give an id “save_blog”. So when a user clicks on save_blog it will call the function that we declare in our script on click event of jQuery.

$(function(){
$(“#save_blog”).click(function(){
});
});

After click event call the jquery will run the function that we have created inside the click function

$(“#save_blog”).click(function(){
// Our Jquery code will be here.
});

In that function, we have used the following code.
var dataString = $(“#form_Blog”).serialize();
dataString is our variable that we declare and we are saving all of our data in that variable whereas “form_Blog” is the id of the form and “.serialize() ” is jquery method which will get all the form field data. Now if you want to test it you can simply use “alert” command to check weather your jquery script fetch the data from the form or not. So the command will be
alert (dataString);

It is a very simple and powerful method that can reduce our a lot of effort and let us do our work in a smart way.

Enjoy!
For any question, comments, suggestions, Please feel free to write.


  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Most Popular

To Top