jquery select element by name attribute - javascript

I have an input with the name attribute:
<input type="text" name="data[foo][bar]" />
how can I select this element?
I tried $("input[name=data[foo][bar]]") but in vein.

Add quotes to the attribute value, otherwise you get conflicting square brackets and a parse error:
$("input[name='data[foo][bar]']")

$("input[name='data[foo][bar]']")

$('input[name="data[foo][bar]"]')
http://api.jquery.com/attribute-equals-selector/ for more info

Use
$("input[name=data\\[foo\\]\\[bar\\]]")
The documentation says:
If you wish to use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?#[]^`{|}~ ) as a literal part of a name, you must escape the character with two backslashes: \. For example, if you have an element with id="foo.bar", you can use the selector $("#foo\.bar").
http://api.jquery.com/category/selectors/

Related

cypress doesn't recognize the element I'm trying to find by placeholder

the element:
<input type="text" class="form-control" placeholder="What's this article about?"
How did I identify:
cy.get("input[placeholder=What's this article about?]").type("<3");
the error:
Syntax error, unrecognized expression: input[placeholder=What's this article about?]
Try this:
cy.get("input[placeholder=\"What's this article about?\"]").type("<3");
or this with less escape characters:
cy.get('input[placeholder="What\'s this article about?"]').type("<3");
Another way can be to use the [attribute*=value] selector. This selects every element whose attribute value contains the substring of the original string. So in your case it could be [placeholder*="article"] or [placeholder*="article about"], basically you can add any substring you want.
Word of caution - This should only be used when you know for sure that the occurrence of the sub string that your are searching for is once, that is your target element.
cy.get('input[placeholder*="article about"]').type('<3')
Or if you have multiple occurrences, then you have to use eq to reach that element.
It worked for me. Try this
cy.get('input[placeholder*="Your Placeholder Text"]')

Selecting value based on string in attribute

I'm working with the following bit of html and am trying to select it's value in either plain javascript or jquery. The name attribute can vary so I can't use it as my selector, although it will always represent the same data (grade_level). I think my best way of selecting it is via the string 'students.grade_level, but I'm not sure how to access it.
<input type="hidden" name="UF-001008-1$formatnumeric=#########.#####" value="1" data-validation="{"maxlength":"10","isinteger":"true","type":"number","key":"students.grade_level"}">
I have so far not been able to select element's value. I have tried:
var myvar = $( "input[data-validation~='students.grade_level']" ).val();
var myvar = $( "input:contains('students.grade_level')" ).val();
How else can I go about this?
TYIA
The way that you have given your attribute is wrong,
<input type="hidden" name="UF-001008-1$formatnumeric=#########.#####" value="1" data-validation="{'maxlength':'10','isinteger':'true','type':'number','key':'students.grade_level'}">
Use quotes properly to cover your attributes, either escape the double quote or use single quotes instead.
And after correcting that you could use the *= attibute value contains selector to achieve what you want,
var myvar = $( "input[data-validation*='students.grade_level']" ).val();
:contains() selector will not work out since it would search for matching text content. Also ~= attribute contains word selector wont work out as we do not have any word in our data-validation attribute. Word in the sense, group of texts separated by a space.
DEMO

different result with jquery and javascript

I have a select with id: param0.typeParameter.
I try to get it with jquery with:
$('#param0.typeParameter');
i get nothing but if it use this
document.getElementById('param0.typeParameter');
that work
To make jQuery select element with ID param0.typeParameter instead of element with ID param0 and class name typeParameter you should use the following:
$('#param0\\.typeParameter');
Official Proof
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").
SOURCE: http://api.jquery.com/category/selectors/
DEMO: http://jsfiddle.net/LtRxg/
You can try this instead:
$('[id="param0.typeParameter"]');
Or else the code assumes you want to select an element with id param0 and class typeParameter
jQuery uses the CSS-selector language. Which causes "#param0.typeParameter" to be interpretted as an element with id param0 and class typeParameter.
The jQuery statement is more similar to:
document.querySelector("#param0.typeParameter");

jquery: How to select the checkbox that has an array value in its attribute name?

How can I use jquery to select the checkbox that has an array value in its attribute name?
html,
<input type="checkbox" name="delete[]" value="1"/>
My attempt that does not work,
$('input:checkbox[name=delete]',container).not('input:checkbox[disabled=disabled]').prop('checked', true);
Any ideas?
You can do this:
$('input:checkbox[name^=delete]',container)
or this:
$('input:checkbox[name="delete[]"]',container)
or this:
$('input:checkbox[name=delete\\[\\]]',container)
In this case, since you're checking an attribute value, you can just wrap the value in double quotes (anything within the quotes is treated literally):
$('input:checkbox[name="delete[]"]')
Or more generally, escape the special characters:
$('input:checkbox[name=delete\\[\\]]');
The method for escaping, and the list of special characters, is covered at the start of the documentation for Selectors.

Selecting a .class inside an .id - javascript

So I am the newest person to javascript and I have an .class inside a couple of Div.id's and am unable to access the id successfully with my .css formatting. Here is my structure.
<div id="mainColumn">
<div id="SpotlightContainer">
<div id="SpotlightText">
<div class="Title"></div>
</div>
</div>
</div>
here is how I try to acces it in JQuery,
$('div.mainColumn div.SpotlightContainer div.SpotlightText div.Title').html(data[0].title);
I can see the data[0].title coming through in Chrome, so I know that isn't the issue.
Can someone please point out where I am going wrong. Thanks.
An id selector starts with a # not a . (which is for a class selector).
You're prefixing IDs with ., but that's for classes. IDs are prefixed with #. You could also use a simpler selector:
$('#mainColumn .Title')
CSS selector for id is #. Your query should be '#mainColumn #SpotlightContainer #SpotlightText div.Title'
Will work ('#' is an id selector. '.' is a class selector!):
$('div#mainColumn div#SpotlightContainer div#SpotlightText div.Title')
However, that selector string will work through any number of children in the hiearchy, independently of how many layers down the child was found. To be more strongly typed, you could specify that the child must be the first child:
$('div#mainColumn > div#SpotlightContainer > div#SpotlightText > div.Title')
..or keep using the whitespace and do not depend on the structure inbetween your elements:
$('div#mainColumn div.Title')
Try this:
$('#mainColumn #SpotlightContainer #SpotlightText .Title');
"#" is used to select id and "." is used to select class.

Categories

Resources