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
Related
I recently saw a code voucher that surprised me a bit and I would really like to understand. Can the document.querySelector() take a parameter, an attribute to make selections :
const tabs = document.querySelectorAll('[data-tab-value]')
<span data-tab-value="#tab_1">Tab-1</span>
I would also like to know why the attribute name is enclosed in brackets.
document.querySelector is just like CSS selectors
It can even select elements with attributes like:
document.querySelector("input[name]") // <input name>; input which has attribute name
document.querySelector("input[type=number]") // <input type='number'>; input whose attribute type's value is number
I am not able to select checkbox which has id="check stage<lead>" in jQuery Selector.
HTML:
<input id="check stage<lead>" type="checkbox" title="Select/Unselect Column" name="chk-stage-column-select" value="" onchange="">
Javascript:
// escape jquery selectors
function jQueryEscape(str) {
if (str)
return str.replace(/([ #;?%&,.+*<>~\':"!^$[\]()=>|\/#])/g, '\\$1');
return str;
}
var StageName = "<lead>";
$("[id='check stage" + jQueryEscape(StageName) + "']").prop("checked", true);
Equivalent JsFiddle : https://jsfiddle.net/vuw43uav/5/
Note: I'm using jQuery 1.7 and we can select id with spaces in jQuery. refer this jsFiddle: https://jsfiddle.net/vuw43uav/7/
I know you asked to make it work using jQuery Selector, but you can do it using javascript.
Just select the element using javascript and make it checked.
document.getElementById("check stage"+StageName).checked = true;
Here is the working fiddle for your 1.7 jquery version.
Fiddle
In case you want jquery selector, just select the element using javascript and then convert it to jquery selector, I know this is lame but should work fine for you.
var y = $(document.getElementById("check stage"+StageName));
y.prop("checked",true);
Id attribute must not have any space characters, check this spec
The value must be unique amongst all the IDs in the element's home
subtree and must contain at least one character. The value must not
contain any space characters.
There are no other restrictions on what form an ID can take; in
particular, IDs can consist of just digits, start with a digit, start
with an underscore, consist of just punctuation, etc.
use data-id instead
<input data-id="check stage<lead>" type="checkbox" title="Select/Unselect Column" name="chk-stage-column-select" value="" onchange="">
$("[data-id='check stage" + StageName + "']").prop("checked", true);
Demo
So I've seen several posts explaining how to use a variable in a value for attribute selection. i.e. (where the JS event refers to the div (making it $(this):
HTML
<div id="item1"></div>
<div id="item1" style="display: none;"></div>
JS
var find = $(this).attr("id")
$('div[id="'+find+'"]').show();
But I would like to know how to use a variable in a jquery selector to find something with a similar string to the value of the variable. i.e. finding an element from the example above but looking for "#item1div", where the event target is still "#item1"
HTML
<div id="item1"></div>
<div id="item1div" style="display: none;"></div>
JS
var find = $(this).attr("id")
$('div[id="'+find+"div"'"]').show(); // incorrect syntax
So my question is: How do I correct the above syntax to include an additional string in the attribute check?
I can't find any reference to the correct syntax for how to add compile a string of the value of a variable and an explicit string then check that as the value for x attribute.
I know I can use [id*="'+find+'"] here because the alternate id contains the same characters as the basic one, but I want to know how to target a specific other id based on the first one. For example if I had #item1, #item1div, and #item1img, how can I use an event on "#item1" to find attribute values equal to "item1div" and/or "item1img"
EDIT: I also just realized I can just use [id|="'+find+'"] if I name the divs accordingly with hyphens, but again doesn't solve ids with different endings (or different strings that come after the hyphen)
$('div[id="'+find+"div"'"]') isn't valid Javascript syntax:
$( // jQuery function
'div[id="' // String
+ find // Add variable
+ "div" // Add String
'"]' // Unexpected string! - Error
One example of valid syntax would be:
$('div[id="'+find+'div"]')
However, since it's an id, you can use the id selector instead:
$('div#'+find+'div')
the question is very unclear, but I assume your question boils down to :
Q:how do you search all the elements where it starts with string x ?
A:To get all the elements starting with "item1" you should use:
$("[id^=item1]")
You should use ID selector like below to find an element by ID,
$('#' + find).show();
To find item1div or the dynamic first part - $('#' + find + 'div')
Note: the incorrect syntax you had mentioned is because of a missing + - It should be
// V-- you missed this
$('div[id="'+find+"div"+'"]').show();
To add the explicit string to the attr value you can write as follows
$('[attr="'+attrVal+'extraString"]')
For evample in case of id of div itemdiv
var item1ID = $('#item1').attr('id'); // item1
$('[id="'+item1ID+'div"]') // valid selector to select #item1div
I am having a html tag as below.
<span id="createOrderFormId:accountNo" style="border-color: red;"><</span>
I need to read the style set for the property border-color so i used the following jquery.
$( document ).ready(function() {
var color = $('#createOrderFormId:accountNo').css('border-color');
alert(color);
});
But its not showing please help.
You probably need to escape : in selector.
Live Demo
$( document ).ready(function() {
var color = $('#createOrderFormId\\:accountNo').css('border-color');
alert(color);
});
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, Reference.
Edit You can use native javascript property style.borderColor You can get DOM object from jQuery object use .get() or indexer. The native getElementById could be used with use escape character and this worked on firefox for me.
Live Demo
$( document ).ready(function() {
alert( $('#createOrderFormId\\:accountNo')[0].style.borderColor);
alert(document.getElementById('createOrderFormId:accountNo').style.borderColor);
});
If it is not working in firefox, then you should try to get the individual sides of borders.
example:
var color = $('#createOrderFormId\\:accountNo').css('border-top-color');
Everything is fine here except span id createOrderFormId:accountNo as you mentioned double column : it is different meaning in jquery selector. It denotes type of element so here it is not treated whole string as id. remove double column, It will will work for you.
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
Hi I am trying to get the HTML of INPUT tag. But unable to..
<input type="checkbox" name="_QS4_CNA" id="_Q0_C7" class="mrMultiple" value="NA">
<label for="_Q0_C7">
<span class="mrMultipleText" style="">None of these</span>
</label>
</input>
And I am trying access as
var dat=$(':checkbox#_Q0_C7').html();
alert(dat);
But i cannot access this. Please help me on this..
The ".html()" method gets the contents of an element, and not the element itself. In your case, the problem is that your HTML is invalid. An <input> tag cannot have content. As far as the browser is concerned, the tag ends where the <label> tag starts, and the browser just ignores the closing tag.
Note that when you've got an "id" attribute to use to find an element, you don't need any other qualifiers in the selector (like ":checkbox"). Just "#_Q0_C7" is all you need, because "id" values have to be unique anyway.
edit — Note that if all you want is to get some attribute (like the value or the "checked" status) from the element, you can certainly do that:
var $cb = $('#_Q0_C7');
var isChecked = !!$cb.prop('checked'); // force a real boolean value
var value = $cb.val();
You can try accessing the RAW underlying DOM element and use its innerHTML property.
var dat = $(":checkbox#_Q0_C7")[0].innerHTML;
But like mentioned by Pointy, that might still get you nothing. Not sure what (if any) input elements have actual siblings.