Find Dom Element by Id When Id Contains Square Brackets

Find DOM element by ID when ID contains square brackets?

You need to escape the square brackets so that they are not counted as attribute selectors. Try this:

alert($("#something\\["+id+"\\]").parent().parent().attr("id"));

See Special Characters In Selectors, specifically the second paragraph:

To use any of the meta-characters (such as !"#$%&'()*+,./:;<=>?@[\]^``{|}~) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar"). The W3C CSS specification contains the complete set of rules regarding valid CSS selectors. Also useful is the blog entry by Mathias Bynens on CSS character escape sequences for identifiers.

jQuery selector fails when ID contains square brackets

You can pass the whole element into jquery:

$(".map-price").keyup(function(event) {
  var amt = $(event.target).val();
  console.log(event.target.id + ' ' + amt);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <input type="input" name="map_price[1]" id="products_map_price[1]" class="map-price">
</div>
<div>
  <input type="input" name="map_price[2]" id="products_map_price[2]" class="map-price">
</div>

Select an element by ID that contains number between square brackets

Special Character

[ is a special character in jquery, to use it as part of the query, you need to put a \ before

The following code will change the input element's values:

function setValue(id, value) {
  $('#re_widget\\[' + id + '\\]\\[widget_id\\]').val(value);
}

$(document).ready(function() {
  $("button").click(function() {
    setValue(1, 'hello');
    setValue(2, 'world');
    setValue(3, 'leon');
  });
});

Online Demo

jQuery - how to find an element with square brackets in its ID attr?

You need to escape the metacharacters( such as !"#$%&'()*+,./:;<=>?@[\]^{|}~ ) in jquery selector using \\.

$('#services\\[3490\\]\\[selected\\]')

---

From jQuery selecctors docs :

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[\]^{|}~` ) as a literal part of a name, it must be escaped with with two backslashes: \. For example, an element with id="foo.bar", can use the selector $("#foo\.bar"). The W3C CSS specification contains the complete set of rules regarding valid CSS selectors. Also useful is the blog entry by Mathias Bynens on CSS character escape sequences for identifiers.

target multiple empty input fields with same id containing brackets

The id in dom is always unique.Instead use document.querySelectorAll to get all the element with same name then loop through them and use the index to check if an element exist in the index of testArray. If so then set the value of the input

var testArray = ['hi', 'bye', 'stackoverflow'];document.querySelectorAll('[name="numberC[]"]').forEach(function(item, index) {  if (testArray[index]) {    item.value = testArray[index]  }
})

<input type="text" name="numberC[]" id="numberC[1]"><input type="text" name="numberC[]" id="numberC[2]"><input type="text" name="numberC[]" id="numberC[3]">

How to reference an id with brackets in jQuery

You have val and text backwards. Swap them:

$('#id\\[2\\]\\[t\\]').change(function() {
  var txtval = $('#id\\[2\\]\\[t\\]').val();
  $("#textpreview").text(txtval);
});

val is used to get the value of the textbox. text to set the text within the div.

You can further simplify the code by using this instead of re-querying the element.

$('#id\\[2\\]\\[t\\]').change(function() {
  var txtval = this.value;
  $("#textpreview").text(txtval);
});

QuerySelector on ID with curly bracket in name

If it's an ID, then you'd use getElementById since by definition there can be only one match (IDs must be unique).

var element = document.getElementById("(art)_and_more");

In the general case, you'd use a quoted attribute selector:

var list = document.querySelectorAll("[id='(art)_and_more']");
// or
var list = document.querySelectorAll('[id="(art)_and_more"]');

...but again, IDs must be unique.

undefind value getting textbox with id as an array

You can use \\ to escape square bracket in jquery selector

https://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/

var button = $("button")button.on("click", function() {  var cell = $("#text\\[0\\]\\[0\\]").val()  alert(cell)})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="text[0][0]" type="text" value="1"><button>Text Box Value</button>

Jquery selectors with index in Ids

its a possible duplicate of
https://stackoverflow.com/a/7396380/2242611
it can be achieved by providing id property in jquery selector syntax $('[id="itemname[0]"]').val()

---

Related Topics