JavaScript - Input value undefined

Question

Hi

I'm new to web development and tring to understand some basics. To make it short, I have an input like this:

<input type="text" id="field" name="field" placeholder="Write something here...">

On separate file with JS extension I want to get the value from this input. I tried doing so in two ways, one in vanilla JS:

var value = document.getElementById('field').value;

This returns the correct value, and second with jQuery:

var value2 = $('#field').value;

And getting an 'undefined" from the second.

Why is this so?

Do you have jquery in your file html file? <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> — user11703419
– user11703419, Commented Jun 15, 2020 at 18:04

Wassaf Shahzad · Accepted Answer · 2020-06-15 18:13:09Z

2

Ok,so you do this by using

var value = $("#field").val();

The reason the first approach works is because it returns the HTML element object and you assess its value property.(you can access any property of that element using . operator)

However using jquery returns JQUERY object and since it does not have a value property u can not access it. You need to use jqueries val function.

answered Jun 15, 2020 at 18:13

Wassaf Shahzad

3131 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

shim-kun · Accepted Answer · 2020-06-15 18:05:22Z

1

In jquery you use the method val(). It would look like this :

var value2 = $('#field').val();

answered Jun 15, 2020 at 18:05

shim-kun

1232 silver badges10 bronze badges

2 Comments

mcgtrt Over a year ago

All right, this one works! But why just normal .value doesn't? Doesn't jQuery share the same methods than plane vanilla JS? That's something I'm trying to understand :D

shim-kun Over a year ago

It's because the $ selector will return an jquery object instead of a html element

Collectives™ on Stack Overflow

JavaScript - Input value undefined

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related