Develop Reference

Jquery get element by id, multidimensional array

I'm trying to get the value of a specific html input that is named like:
<input type="hidden" value="." id="grid[0][0]">
where [0][0] could be any value within a foreach loop.
using Jquery:
var currVal = $('#grid['+x+']['+y+']').html();
I'm getting an undefined value. Not sure whether it's a syntax problem. I haven't found a similar example so I'd appreciate any help on this. Thanks!

It actually is a syntax problem. jQuery interprets "#grid[...]" as an HTML element with the ID "grid" and some attribute (or other meta stuff) just like CSS would.
To solve simply escape the [ and ], like this:
$('#grid\\[' + x + '\\]\\[' + y + '\\]').val()
That should do it :)
Edit: As noted by Josh Crozier, the html() method is supposed to be used in normal tags (like div). For input, select or textarea you should use val() -- Docs on that: http://api.jquery.com/val/

You can also do :
var currVal = $('input[id="grid['+x+']['+y+']"]').val();

How to select element with id containing \ in jquery or javascript

we have some legacy code where Html element ID's are populated dynamically from database data (I cant change the data here)
ex. <input type="text" id="2314/test/film/code\branch"/>
when I get the ID from click event like below
var src = window.event.srcElement; I get src.id= "2314/test/film/code\\branch";
I want to use the src.id to find the same element in different function like $(_element).find("[id='" + src.id + "']").get();
which is failing to get any ID since I see "\" is replaced with "\\"
Please suggest me how to get around this ?

I don't think jQuery lets you use / in a selector. It is an illegal character in an id name, but still odd that jquery seems to flat out refuse it. Since JS has no problem with that selector You can select it with JS then pass it off to the jquery wrapper.
$(document.getElementById('2314/test/film/code\\branch'));

Maybe it´s works for you
http://codepen.io/luarmr/pen/vOgoLO
$("[id='" + str.replace(/\\/g,'\\\\') + "']").html(str)

The correct regex for backslash is '\\\\'.

jquery escape square brackets to select element

Consider a input element
<input id="meta[152][value]" type="text" />
Here the input field is dynamically generated. I need to select that field. So I used,
alert($('#meta[152][value]').val());
But this seems to be invalid. After searching I found, that the "square brackets" need to be escaped like #meta\\[152\\]\\[value\\]
So how to do that ?
I currently use this code,
var id = "#meta[152][value]" // (I get this value by another method) I need the escaping to be done here. So that i can use as
/** I need the value of id to be escaped using regex,replace or any other method
to get #meta\[152\]\[value\]
and not manually **/
alert($(id).val());
Your suggestions will be helpful !

The following should work:
alert($('#meta\[152\]\[value\]').val());
or
var id = "#meta\[152\]\[value\]";
alert($(id).val());
Working Example
Conversion Function:
function ConvertValue(id)
{
var test = id.replace(/[[]/g,'\\\\[');
return "#" + test.replace(/]/g,'\\\\]');
}
Conversion Example

If you feel more comfortable without escaping you also use the attributes selector and search for the element with that id like this: $("[id='meta[152][value]']")

The simplest way is just to use the regular getElementById, which requires no escaping:
document.getElementById("meta[152][value]").value;

this shoudl work for you, you almost had it:
$(document).ready(function() {
var id = "#meta\\[152\\]\\[value\\]";
alert($(id).val());
});

Um, just put the escaped value right in your string.
var id = "#meta\\[152\\]\\[value\\]";
See it working here

You can use the _.escapeRegExp method from the Lodash library.
console.log($('#' + _.escapeRegExp('meta[152][value]')).val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<input id="meta[152][value]" type="text" value='Test' />

How to read the contents of text area by jQuery?

<textarea id="metaSourceText" name='key' style="width:100%" class="text ui-widget-content ui-corner-all" rows="1"></textarea>
I tried
$metaSourceValue = $('metaSourceText').val();
alert($metaSourceValue);
But it shows "undefined"

Your code just needs to be tweaked, to something like this:
var metaSourceValue = $('#metaSourceText').val();
alert(metaSourceValue);
you were missing the hash before metaSourceText, signaling an ID to jQuery. And you typically don't want to start variables with $

You missed the # character in $('#metaSourceText')

.text() method will also give you value of textarea. In ready() state you can either get object of textarea using class selector or id selector.
$(document).ready(function () {
$("#submitbtn").click(function () {
var textAreaValue = $("#txtMessage").text();
alert(textAreaValue);
});
});
Check sample here: http://www.codegateway.com/2012/03/get-textarea-value-in-jquery.html

Please define the selector with '#' prefix as it is an ID you are referring.
In your case, it refers a DOM element of type metaSourceText which really does not exists..
To get a value of this text area:
you can use .text() or val();
$(function(){
var textareaContent = $('#metaSourceText').text();
alert(textareaContent);
​}​);​
fiddle link:http://jsfiddle.net/Ds4HC/1/

Javascript variables don't start with $. EDIT: They can, but usually do not. See
Why would a JavaScript variable start with a dollar sign?)
You want to try:
var metaSourceValue = $('#metaSourceText').val();
alert(metaSourceValue);
The $(...) used by jQuery is a shortcut to the jQuery function.
Also, as others mentioned, you need $('#metaSourceText') if you're trying to reference the textarea by id - you were missing the #.

jQuery Change picture on link click (matching with the same number in id)

I got a generated list of links where every link has an unique id(number) and a class called "load".
I would like to change a picture on the other side of the page with the same number in the id as the link I clicked. Since id on elements are unique, i added folderid[number] infront of all the images
This is what i have so far (not working). I'm not sure if this is even close to correct but it feels like it :)
$(function(){
$(".load").click(function(){
var element = $(this);
var link_id = element.attr("id");
alert(link_id);
$("#folderid", link_id).attr("src", "img/folder_open.gif")
});
});
My pictures and links looks like this in the code:
<img src="img/folder.gif" id="folderid5" class="img_folder" alt="Folder"/>
<a href="#" id="5" class="load img_id5">
Thanks

It looks like you mean to select
$('#folderid' + link_id).attr(...)

If you mean your images have their IDs as:
folderid[1],folderid[2], etc
the '[' character is probably posing a problem with jQuery. You can try escaping it and using:
$("img#folderid\\["+link_id+"\\]").attr("src", "img/folder_open.gif");
I haven't had the need to escape characters in jQuery before, because I could simply change my naming convention, but I believe the above should work.
Another way to go would be to remove the brackets from the ID and use:
$("img#folderid"+link_id).attr("src", "img/folder_open.gif");

You are close. You need to concatenate the id onto the selector of the image instead of using a comma. Try this code:
$(function(){
$(".load").click(function(){
var element = $(this);
var link_id = element.attr("id");
alert(link_id);
$("#folderid" + link_id).attr("src", "img/folder_open.gif")
});
});

I think you need a + not a , on this line:
$("#folderid", link_id).attr("src", "img/folder_open.gif")
to
$("#folderid" + link_id).attr("src", "img/folder_open.gif")

http://docs.jquery.com/Events/live should do the trick for generated stuff.
Also: add a semicolon ( ; ) after attr(..., ...)
$("#folderid", link_id).attr("src", "img/folder_open.gif");