w3resource

jQuery: Access form input fields using jQuery

jQuery Practical exercise Part - I : Exercise-25

Access form input fields using jQuery.

Sample Solution:

HTML Code :

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Access form input fields using jQuery</title>
</head>
<body>
<form id="myForm" action="sample.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p> Click Submit button to get all the forms elements and their values</p>
</body>
</html>

JavaScript Code:

$('#myForm').submit(function() {
  var values = $(this).serialize();
  console.log(values);
});

See the Pen jquery-practical-exercise-25 by w3resource (@w3resource) on CodePen.


Contribute your code and comments through Disqus.

Previous: How to get textarea text using jQuery.
Next: Find the absolute position of an element using jQuery.

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.



Become a Patron!

Follow us on Facebook and Twitter for latest update.

It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.

https://www.w3resource.com/jquery-exercises/part1/jquery-practical-exercise-25.php