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.
Use the search field on my Home Page to filter through my more than 1,000 articles.