Jquery Selector for Inputs with Square Brackets in the Name Attribute

jQuery selector for inputs with square brackets in the name attribute

Per the jQuery documentation, try this:

$('input[inputName\\[\\]=someValue]')

[EDIT]
However, I'm not sure that's the right syntax for your selector. You probably want:

$('input[name="inputName[]"][value="someValue"]')

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>

jQuery Input Selectors with Square Brackets - iPhone

I think you forgot an ending square bracket:

if ( $( '[name=addons\\[' + addon_id + '\\]\\[selected\\]]' ).prop( 'checked' )) {

inputs with square brackets in the name attribute

First of all I think this is not good practice to put much code inside on- event attributes. As for me, I prefer to define some functions in javascript source file and use them rather than put complex expressions into attributes.

Anyway, the issue is that form.RegisterForm[password2].pattern is wrong way to access your input element.
In this case first form object is looked up. Then interpreter tries to look up RegisterForm property. Square brackets is another way to access object's property, but it requires a string. In your case there goes password2 identifier rather that string literal, and I believe it will try to read the value of variable with same name and look up property in RegisterForm depending on result. So entire expression is invalid and likely will fail early at RegisterForm step.

But you still can access your input by name containing square brackets, for example using querySelector() function:

var passwordInput = document.querySelector('input[name="RegisterForm[password]"');
var confirmInput = document.querySelector('input[name="RegisterForm[password2]"');

Following code snippet works as expected: if entered password is invalid it sets custom validity message to password input, otherwise it sets empty validity message and updates pattern attribute of confirmation input.

function validatePassword() {

    var self = document.querySelector('input[name="RegisterForm[password]"]');

    var conf = document.querySelector('input[name="RegisterForm[password2]"]');

          

    self.setCustomValidity(self.validity.patternMismatch ? self.title : '');

          

    if (self.checkValidity()) {

        conf.setAttribute("pattern", self.value);

    }

}

function validateConfirm () {

    var self = document.querySelector('input[name="RegisterForm[password2]"]');

    self.setCustomValidity(self.validity.patternMismatch ? self.title : ''); 

}       

<input

     title="Password should contain at least 6 characters or numbers"

     type="password"

     required

     pattern=".{6,}"

     class="input_bx"

     name="RegisterForm[password]"

     oninput="validatePassword();"

     placeholder="Password..."/>

<input

     title="Please enter the same Password as above"

     class="input_bx"

     type="password"

     required pattern=".{6,}"

     name="RegisterForm[password2]"

     oninput="validateConfirm();"

     placeholder="Confirm Password . . ."/>

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.

jQuery get object by name when name contains a [ -character

In quotes:

$("input[name='inputa[85]']")

or

$('input[name="inputa[85]"]')

Jquery not working with square brackets in rails 4 app

Either you delimit the search value or you escape meta-characters but not both. Thus use either:

$("input:radio[name='resource[option]']")....

Or:

$("input:radio[name=resource\\[option\\]]")....

console.log( 'Escaped', $("input:radio[name=resource\\[option\\]]").val() );

console.log( 'Delimited', $("input:radio[name='resource[option]']").val() );

$(':radio[name=resource\\[option\\]]').on('change', function() {

    console.log( 'Change event fired checkbox checked?', this.checked );

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="radio" name="resource[option]" value="3432"/>

jQuery - getting error for square brackets in name attribute

Your attribute value should be wrapped within "", there is no need to escape the [ or ]

$('#' + formId + ' input[name="' + key + '"]').addClass('inputBoxError'); 

So the translated selector should be

$('#myform input[name="violationCategory[1].subCategory"]').addClass('inputBoxError'); 

Update

You need to select a <select> element, then you need to change the element selector input to select like $('#' + formId + ' select[name="' + key + '"]').addClass('inputBoxError');

---

Related Topics