How to convert form data to JavaScript object with jQuery ?
Last Updated :
11 Apr, 2023
JavaScript objects are complex data types that can store multiple values and properties. Unlike primitive data types that only hold a single value, objects can hold various data types, including other objects, arrays, functions, and more. The inputs given by a user can be converted into objects where multiple inputs can be stored and that are easily accessible. Data that we get from the form can be converted into JavaScript objects using jQuery functions.
The serializeArray() method is a jQuery function that represents a form, it collects all of the form data and converts it into an array of objects.
Syntax:
$(selector).serializeArray();
Parameters:
- selector: form or form elements like text area or input can be selected by the selector parameter.
Approach:
- Create a form using HTML5.
- After submitting the form, use the serializeArray() method to collect all the form data and convert it into an array object.
- With the help of the JavaScript forEach() loop, store the inputs on the client side using console.log().
- The event.preventDefault() method is used to prevent the form from getting submitted on clicking submit button because we are dealing in the front end, not in the backend. To get the data successfully on the client side, we need to use this function.
Example 1: The following example stores the name of the student and its city name on the client side using the serializeArray() method.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<form id="form">
<label for="name">Name:</label><br>
<input id="name"
type="text"
name="name"
placeholder="Name"
required="" /><br>
<label for="City">City:</label><br>
<input id="city"
type="text"
name="city"
placeholder="City"
required="" /><br><br>
<button type="submit">Submit</button>
</form>
<script>
$("form").submit(function (event) {
let obj_form = $(this).serializeArray();
obj_form.forEach(function (input) {
console.log(input.name + ":" + input.value);
})
event.preventDefault();
});
</script>
</body>
</html>
Output: After submitting the form, check if the form data has been converted to a JavaScript object by right-clicking on Submit button and then selecting Inspect, & then selecting the Console tab to get the form data.
Example 2: The following example stores the student Id, username, and name of the department on the client side.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<form id="form2">
<label for="student Id">
Student Id:
</label><br>
<input id="student Id"
type="text"
name="Student Id"
placeholder="Student Id"
required="" /><br>
<label for="User name">
User name:
</label><br>
<input id="User name"
type="text"
name="User name"
placeholder="User name"
required="" /><br>
<label for="Department">
Department:
</label><br>
<input id="Department"
type="text"
name="Department"
placeholder="Department"
required="" /><br><br>
<button type="submit">
Submit
</button>
</form>
<script>
$("form").submit(function (event) {
let obj_form = $(this).serializeArray();
obj_form.forEach(function (input) {
console.log(input.name + ":" + input.value);
})
event.preventDefault();
});
</script>
</body>
</html>
Output: After submitting the form, check if the form data has been converted to a JavaScript object. Then, right-click on Submit button and then select Inspect, & select the Console tab to get the form data.
Similar Reads
How to Convert a JavaScript Object to a Form Data in JavaScript? In web development, especially when dealing with forms and AJAX requests, you might find yourself needing to convert a JavaScript object into a FormData object. The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can the
4 min read
How to convert jQuery to JavaScript ? JavaScript is an object orient programming language designed to make web development easier and more attractive. In most cases, JavaScript is used to create responsive, interactive elements for web pages, enhancing the user experience. jQuery is an open-source JavaScript library that simplifies the
2 min read
How to Convert JS Object to JSON String in JQuery/Javascript? Converting a JavaScript object to a JSON string means using the JSON.stringify() method to transform the object into a JSON-formatted string. This allows for efficient data storage, transmission, and debugging by representing complex data structures in a standardized text format.To Convert JS Object
4 min read
How to Convert HTML Form Field Values to JSON Object using JavaScript? Storing HTML input data into JSON format using JavaScript can be useful in various web development scenarios such as form submissions, data processing, and AJAX requests. Here we will explore how to convert the HTML form input data into the JSON format using JavaScript. ApproachThe HTML file contain
2 min read
How to get form data using JavaScript/jQuery? The serializeArray() method creates an array of objects (name and value) by serializing form values. This method can be used to get the form data. Syntax: $(selector).serializeArray() Parameter: It does not accept any parameter. Return Value: It returns all the value that is inside the inputs fields
1 min read