Witchcraft in Javascript manipulating DOM?

Question

I have 3 HiddenFor Razor Strings on the HTML wich will pass values to the Model C#.

Then i have a javascript with three Dropzones (js lib for drag and drop). At this point there will be three "remove events" wich will populate that hiddenforValues.

To do this i tested 3 different syntaxs:

document.getElementById().value
document.querySelector().value
$('#Element').value

but i noticed something strange: for the first two hiddenfor the querySelector and the Jquery method works fine, however for the third one only document.getElementById will work (otherwise value will be sent as null). At same time document.getElementByID is not recognized if i use this more than once.

So if i use Jquery for two of them and document.getElementById for the last one this will work fine.

The question is... why?

The only thing different is that third string have "," inside.

Jquery dont work with special characters or something like that?

My code works but im just curious about that buggy functionality.

Answer 1

You'd better use $('#Element').val() instead.

$(*) returns a jQuery collection that has many methods but no option like value .

Answer 2

document.querySelector and $() both accept a css selector string for identifying a target. In CSS, , separates selectors.

Thus, $('#a,b') will look for an element with id "a" or a b element, whereas document.getElementById('a,b') will yield an element with the id "a,b".

To simulate this behavior in jQuery, you'd need to write $('*[id="a,b"]');