Solve - $(...).value is not a function jQuery Error

avatar

Borislav Hadzhiev

Tue Oct 19 20211 min read

banner

Photo by Mitchell Orr

Solve - $(...).value is not a function #

The "$(...).value is not a function" error occurs because there is no function named value() in jQuery. To solve the error, use the val() function instead, e.g. $('#full_name').val().

jquery value is not a function error

index.js
$(document).ready(function () { // โ›”๏ธ BAD - value() function does not exist console.log($('#full_name').value()); // โœ… GOOD - using `.val()` function console.log($('#full_name').val()); });

Here's a complete working example.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <input id="full_name" type="text" value="James Doe" /> <!-- โœ… load jQuery โœ… --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- โœ… load your JS file โœ… --> <script src="index.js"></script> </body> </html>

We loaded the jQuery library and then ran our JS file (index.js in the example).

Here's the code in the index.js file.

index.js
$(document).ready(function () { console.log($('#full_name').val()); });

If you load the page and open the console, you'll see the value of the input field logged.

If you're still getting errors, make sure you're loading the jQuery library only once.

Loading the library twice re-runs the initialization process and is a cause for confusing bugs.

If you're loading the jQuery library from a file on your local file system, make sure the path to the file is correct.

You can check by opening your browser console and looking for any 404 errors related to loading the jQuery script.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee