CODEWITHSUNDEEP
javascriptjquery
CShore
CShore

Reputation: 65

What is the difference between these two javascript and jquery statements?

Sorry, I'm a beginner in javascript and jquery. I'm trying to get jquery working... can't understand the difference between these two statements: 

console.log ($("#FirstName").value);
console.log(document.getElementById('FirstName').value);

The first one comes back as "undefined" while the second correctly gives me the name in my text input box. Here's the HTML for that box

<input type="text" id="FirstName" class="TabInput" value="'. $ListRow[3] . '">

I've linked to jquery in the file already and have other jquery functions working. Am experimenting to see how jquery works and can't see why these are not the same...

if I just use 

console.log ($("#FirstName")

it works but gives me:

r.fn.init [prevObject: r.fn.init(1)]

whatever that means...

Upvotes: 1

Views: 191

Answers (5)

CShore
CShore

Reputation: 65

Thanks to everyone for your posts. It's a simple question but there was one subtlety that I (and apparently a few others) were missing... that the jquery selector will return a COLLECTION of elements and NOT a unique DOM element. Thanks @Adrian for your answer.

Yes, it looks like using .val() instead of .value works as well. I do find this strange though since it seems to go against the first answer (since it doesn't require me to specify which element in the collection) but anyway, it works and also gives me the HTML "value" attribute for that element (in this case the first name typed into the text box).

Upvotes: 0

Adrian Brand
Adrian Brand

Reputation: 21658

document.getElementById returns a single DOM object with the id of the string passed in. $(cssSelector) returns a jQuery object that has a collection of DOM objects that match the CSS selector, in your case DOM objects that have the id FirstName.

If you want to access the value property directly you would need to do it via the first DOM object in the collection or with the jQuery method val.

// Use the jQuery val function
console.log ($("#FirstName").val());

// Or get the first element and look at the value property
console.log ($("#FirstName")[0].value);

console.log(document.getElementById('FirstName').value);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="FirstName" class="TabInput" value="'. $ListRow[3] . '">

Upvotes: 1

Florenz
Florenz

Reputation: 53

$("#FirstName")

is a jquery shorthand code for the pure javascript code 

document.getElementById("FirstName")

To get the value of the element using both codes, the jquery shorthand uses '.val()'

Ex.

$('#FirstName').val();

while the pure javascript code uses '.value'

Ex.

document.getElementById("FirstName").value;

To sum this all up:

$('').val();

is equal to 

document.getElementById('').value;

Upvotes: 0

el-teedee
el-teedee

Reputation: 1341

$ (or jQuery()) is a jQuery function that wrapps the searched object(s) (by a selector), thus, the returned object does not have a value property, but provides instead utility methods to get equivalent.
See .val() in http://api.jquery.com/category/manipulation/general-attributes/

Upvotes: 0

Aniket G
Aniket G

Reputation: 3512

jQuery doesn't use .value. It uses .val()

That's why it gave you undefined

However javascript does use .value which is why it gives you the correct answer.

Javascript 

document.getElementById("submit").addEventListener("click", function() {
  console.log(document.getElementById("text").value);
});
<input type="text" id="text" />
<button id="submit">Submit</button>

jQuery

$("#submit").click(function() {
  console.log($("#text").val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="text" />
<button id="submit">Submit</button>

Upvotes: 1

Related Questions