Updated April 17, 2023
Introduction to jQuery get form values
The jQuery get form value is performed to get the data inside the form. The jQuery get form values can be perform with the help of val() function and serialize() function. The jQuery val() function and serialize() function are built-in functions in jQuery. The val() function can be used to get the first element’s value attribute in the set of matched elements. The serializeArray() function is used to get from data; it returns the array of objects by serializing the form data.
The syntax of the jQuery val() function –
$( "selector" ).val();The syntax of the jQuery serializeArray() function-
$( "selector" ).serializeArray();Parameters –
The jQuery val() and serializeArray() functions does not accept any parameters.
Return value –
The return value of this val() function is the value attribute of the first matched element.
The return value of this serializeArray() function is all the values of the form data.
Working of the jQuery get form values
The jQuery get form values can be performed with the help of the val() function or serializeArray() function; both the functions do not accept any parameters. Suppose we have a form element in the HTML page containing some form input elements like input text element and checkbox element. Now we need to get the input text data of the form, so we can use the val() function as var name =$(“#fname”).val();”, where “#fname” is the id of the input element. So the val() function returns the value entered in that input text.
Examples for the jQuery get form values
Different examples are mentioned below:
Example #1
Example of jQuery get form values to get the form data with the val() function –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery get form values </title>
</head>
<body>
<h3> This an example of jQuery get form values : </h3>
<form action = "#myform">
<h3> Please Enter the details : </h3>
<div>
First name : <input type = "text", id = "fname"> <br/> <br/>
Last name : <input type = "text" id = "lname"> <br/> <br/>
Mobile number : <input type = "text" disabled = "disabled" id = "mob" > <br/> <br/>
Email ID: <input type = "text" id = "eid"> <br/> <br/>
<input type = "submit" id = "subm">
<p> Click to the submit to get the form entered data. </p>
</div>
</form>
<p id = "p1"> </p>
<script>
$(document).ready(function() {
$( "#subm").click(function(){
var fname = $("#fname").val();
var lname = $("#lname").val();
var mob = $("#mob").val();
var eid = $("#eid").val();
$( "#p1" ).append("The first name is : " +fname);
$( "#p1" ).append("<br> The last name is : " +lname);
$( "#p1" ).append("<br> The mobile number is : " +mob);
$( "#p1" ).append("<br> The email id is : " +eid);
});
});
</script>
</body>
</html>An output of the above code is –
when we enter the data and click on the button, the output is –
In the above code, there is a form that contains some input elements and submits button. Next, after entering the data, when we click submit button, it displays all the entered data by using the val() function as “var lname = $(“#lname”).val();”, and display using the append() function, we can see once we click on the button.
Example #2
Example of jQuery get form values to get the form data with the serializeArray() function –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery get form values </title>
</head>
<body>
<h3> This an example of jQuery get form values : </h3>
<form action = "#">
<h3> Please Enter the details : </h3>
<div>
Name : <input type = "text", name = "name" id = "fname"> <br/> <br/>
Gender : <br />
<input type = "radio" name = "gr" value = "male"/> Male
<input type = "radio" name = "gr" value = "female"/> Female
<br /><br />
<input type = "submit" id = "subm">
<p> Click to the submit to get the form entered data. </p>
</div>
</form>
<p id = "p1"> </p>
<script>
$(document).ready(function() {
$( "#subm").click(function(){
var x = $("form").serializeArray();
$.each(x, function(i, field) {
alert(field.name + " : " + field.value + " ");
});
});
});
</script>
</body>
</html>An output of the above code is –
When we entered the data and click on the button, the output is –
Click ok, the output is –
In the above code, there is a form that contains some input elements and submits button. Next, after entering the data, when we click submit button, it displays all the entered data by using the seralizeArray() function as “var x = $(“form”).serializeArray();”, where x stores the return object of the serializeArray(), the object contains all name-value pair for the form elements and then display all the name-value pairs using the each loop, as we can in the output.
Example #3
Example of jQuery get form values to get the form data with the serialize() function –
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<title> This is an example for jQuery get form values </title>
<script>
function disp()
{
var x = $( "form" ).serialize();
alert( x );
}
</script>
</head>
<body>
<h3> This an example of jQuery get form values </h3>
<form action = "#myform">
<div>
Name : <input type = "text" name="name"> <br/>
Password : <input type = "text" name="pass" > <br/>
Select Department : <select name="dept">
<option > Production </option>
<option> Marketing </option>
<option> Research and Development </option >
<option> Human Resource Management </option>
</select>
<input type = "submit" id = "sub">
</div>
<button onclick = "disp()"> Click to get the enabled elements in the form. </button>
</body>
</html>An output of the above code is –
When we enter the data and click on the button, the output is –
In the above code, there is a form that contains some input elements and submits button. Next, after entering the data, when we click submit button, it displays all the entered data by using the seralize() function as “var x = $( “form” ).serialize();”, where x stores the return object of the serialize() and then display the return object using the alert() function, as we can in the output.
Conclusion
The jQuery get form values can be per with the help of va(), seralizeArray(), and seralize() functions, it is performed to get the data inside the form.
Recommended Articles
This is a guide to jQuery get form values. Here we discuss the Working of the jQuery get form values along with the examples and outputs. You may also have a look at the following articles to learn more –
