This question already has answers here:
How can I select an element by name with jQuery?
(14 answers)
Closed 3 years ago.
Following is the code:
<td><bean:write name="row" property="suppnr" /></td>
How to get the supplier number (suppnr) value like below?
var sup = document.getElementByID('suppnr').value(); // This dosent work as suppnr is a property
alert(sup);
Do we have any method to do this? Kindly help
Select elements where attribute property exists:
var suppnr = $('[property]');
Select elements where attribute property equals to suppnr:
var suppnr = $('[property="suppnr"]');
alert (suppnr.attr('name'));
First of all, you don't have ID on tr, so first add id attribute as you are selecting via the id attribute.
<td><bean:write name="row" id="suppnr" property="suppnr" /></td>
Then you can easily get any attribute using getAttribute function:
var sup = document.getElementById('suppnr').getAttribute('property');
alert(sup);
Some properties are reflections of attributes, which means that setting the property sets the attribute, which allows you to use attribute selectors. For instance, an input element's defaultValue property is a reflection of its value attribute (which its value property is not).
Otherwise, you select by what you can and use filter to filter the resulting list to only the elements you actually want.
For example, I'd set a property using jQuery like this:
$('#foo').prop('my-property', 'value');
No, there's no way to select by that property directly, you'd need something like my filter suggestion above:
var list = $("something-that-gets-you-close").filter(function() {
return this["my-property"] == "value";
});
You might consider using data-* attributes instead:
$("#foo").attr("data-my-property", "value");
then
var list = $("[data-my-property='value']");
to select it (the inner quotes are optional for values matching the definition of a CSS identifier). Note that attribute values are always strings.
Beware: There's a persistent misconception that jQuery's data function is a simple accessor for data-* attributes. It is not. It manages a data cache associated with the element by jQuery, which is initialized from data-* attributes but disconnected from them. In particular, .data("my-property", "value") would not let you find that later via a [data-my-property=value] selector.
Related
Hi I have an array called "arrayRestado1" from which I want to extract the first element and save that value in the value property of an html input. If it extracts the value but, it does not find the input with that class so the input does not show anything.
The code is in JavaScript:
const col1_f1 = document.getElementsByClassName("col1_f1").value = arrayRestado1[0]
console.log(col1_f1)
the function document.getElementsByClassName() returns an array of elements (an HTML Collection to be correct), not only a single DOM element.
Here's the documentation: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
So with your current code you could try this:
const col1_f1 = document.getElementsByClassName("col1_f1")[0].value = arrayRestado1[0]
console.log(col1_f1)
See the [0] after the function? This means we want the first element of the array. Doesn't matter if there is only one with the given class name col1_f1.
Otherwise you could give your inputs/elemets specific (unique) ids and then use the document.getElementById() function to get them as single elements "directly" in the first place.
More on that here: https://www.w3schools.com/jsref/met_document_getelementbyid.asp
Have a good day!
Nico
I have this scenario where i need to assign a java-script object to div attribute.
var temp["name"]="first";
i assigned it to a div tag attribute using Jquery.
div.attr('data-polygon',temp);
Object [ <div#image01> ]
when i try to retrieve it , it does not come back same.. it is converted as String.
div.attr('data-polygon');
"[object Object]"
Any proper option / alternate to retain the object in attribute? please let me know
Attributes are always strings.
Here are two options for doing this; since you're already using jQuery, the first is probably best:
jQuery's data
jQuery provides the data method for doing this:
// Setting -- notice no "data-" prefix
div.data("polygon", temp);
// Retrieving
varName = div.data("polygon");
Under the covers, traditionally data assigns the element a unique ID and manages a data cache for the element, separate from it. I think in the v3 branch they've updated it to actually store the data on the element (there were memory issues with doing that in Internet Explorer 8 and earlier, which is why jQuery didn't do it before).
Assign it as your own "expando" property
If you don't need to support Internet Explorer 8, you can just create a property on the actual DOM element.
// Setting
rawDiv.myUniquePrefixToAvoidConflicts_polygon = temp;
// Getting
varName = rawDiv.myUniquePrefixToAvoidConflicts_polygon;
Note that to avoid conflicts with the many predefined properties elements have, and future ones they don't have yet, you'll want to use a likely-unique prefix.
Is there a way to get/select an element by it's property value, just as it is possible with the attribute values:
$('[attribute="value"]')
For example, I'd set a property using jQuery like this:
$('#foo').prop('my-property', 'value');
and then I'd like to find an element which has property 'my-property' and it has value 'value'.
No, there isn't anything exposed at the selector level that can select by property value, just (as you know) attribute value.
Some properties are reflections of attributes, which means that setting the property sets the attribute, which allows you to use attribute selectors. For instance, an input element's defaultValue property is a reflection of its value attribute (which its value property is not).
Otherwise, you select by what you can and use filter to filter the resulting list to only the elements you actually want.
Re your edit:
For example, I'd set a property using jQuery like this:
$('#foo').prop('my-property', 'value');
No, there's no way to select by that property directly, you'd need something like my filter suggestion above:
var list = $("something-that-gets-you-close").filter(function() {
return this["my-property"] == "value";
});
You might consider using data-* attributes instead:
$("#foo").attr("data-my-property", "value");
then
var list = $("[data-my-property='value']");
to select it (the inner quotes are optional for values matching the definition of a CSS identifier). Note that attribute values are always strings.
Beware: There's a persistent misconception that jQuery's data function is a simple accessor for data-* attributes. It is not. It manages a data cache associated with the element by jQuery, which is initialized from data-* attributes but disconnected from them. In particular, .data("my-property", "value") would not let you find that later via a [data-my-property=value] selector.
I wish to change the name attribute at dynamic in JavaScript, but I couldn't change the name attribute using either element.name or the setAttribute() method. Is there any other way to set the name attribute?
var status_Element = document.getElementsByName("BD_task_status_"+old_id+"[]");
var final_status_Element = document.getElementsByName("BD_final_task_status_"+old_id+"[]");
for(var in_count=0;in_count<status_Element.length;in_count++)
{
status_Element[in_count].name="BD_task_status_level"+inner_count+"[]";
final_status_Element[in_count].name="BD_final_task_status_level"+inner_count+"[]";
}
Setting the name property as in your example will work (other than the inner_count vs in_count typo). The issue is that getElementsByName returns a live collection of elements. When you change the name of the element at index 0, it no longer belongs in the collection and the collection drops it; then the element that used to be at index 1 is now at index 0. But in the meantime, you've incremented in_count and so you never end up changing that element. Half of them will end up not being changed.
Either:
Loop backward through the collection to change the names (since then the element that disappears is at the end and you don't care), or
Use querySelectorAll instead, which gives you a snapshot collection (not a live one). (querySelectorAll is supported on all modern browsers, and also IE8.)
I have a code like this:
<s:select id="s" list="list" listKey="id" listValue="displayValue">
When I get the value from the object I'll always get the id.
How can I change the "listKey" value dinamically so I could get for example, the name of the object (supposing other of my attributes besides id is name ) instead always de id?
I was trying some code in jQuery like this:
function changeListKey(){
var id = $("#s").val();
$('#s').attr('listKey','name');
var name = $("#s").val();
document.write(name); // Only to test if I could get the value
}
When I execute it it doesn't seem to change the "lisKey" value so I could get another one, what would be the solution?
Thanks a lot in advance.
John Smith.
Why would you want to mix up what's used as the key value? That would make a mess on the server side.
In any case, listKey isn't an HTML attribute, it's a custom tag attribute, and is meaningless after the HTML has been rendered and sent to the client. You would need to iterate over the HTML select element's options collection and change the values on the options.
All this said, you'd be much better off doing any bizarre manipulations like this in the action itself, and exposing only the desired key/value pairs to the JSP, either in a list, or more easily, in a map. Using a map eliminates the need to provide listKey/listValue attributes--just use the map's key as the option text, and the value as the option's value.