jquery only returns first input element from dev tools console

Question

I have the following html:

<form novalidate="" id="loginform" action="" method="post">
  <input type="hidden" name="c" id="c" value="abc">
  <input type="hidden" name="initiation" id="initiation" value="test1">
  <input type="hidden" name="rmo" id="rmo" value="test2">

................

I want to select all the input elements, but when I enter:

$("input")

In the chrome devtools console, I only get the first element:

<input type="hidden" name="c" id="c" value="abc">

what can I enter to get an entire list of the input elements?

Answer 1

This is not a stupid question. It's actually confusing behaviour brought about by Chrome developer tools.

What has happened here is that you've not included JQuery. Google Chrome has the variable/function $ available in Chrome developer tools. It's different to jQuery.

Here is documentation about it: https://developers.google.com/chrome-developer-tools/docs/commandline-api#selector

The documentation in this case says:

Returns reference to the first DOM element with the specified CSS selector.This function is an alias for document.querySelector() function.

So, it kind of works like jQuery, enough to fool you if you don't expect it. And it's only available in developer tools. And it is aliased when you install jQuery which installs itself in window.$ so you'd never know (try printing $ and window.$ in a console on a blank window).

Fix this by adding jQuery to your HTML document.