Reputation: 65
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
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
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
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
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
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