jQuery, how to find an element by attribute NAME? - javascript

I found many example finding elements by attribute value BUT not with name. I want to find all elements (can be link, button, anything) with the attribute containing deleteuserid. I tried this:
console.log($('[deleteuserid!=""]'));
but this find "everything" which not even containing the deleteuserid attribute...
something like this: jQuery how to find an element based on a data-attribute value? expect that I dont have a concrete value (in other words, I want to find $("ul").find("[data-slide=*]");

Simply use deleteuserid instead of deleteuserid!="" like following.
console.log($('[deleteuserid]'));

you can use the jquery attribute selector to search by name.
console.log($('[name="deleteuserid"]'));

You can search by simple $('[name="deleteuserid"]')
console.log($('[name="deleteuserid"]'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p name="deleteuserid">
</p>
<div name="deleteuserid">
</div>
<i name="deleteuserid"></i>
<b></b>

$( "*[name*='deleteuserid']" ).addClass('iFoundyou');
JSFiddle

Reference: https://www.w3schools.com/cssref/sel_attr_begin.asp
My demo:
All my selects have id="<f_field_name>"
<select id="f_type" />
<select id="f_employee" />
$('[name="form_monitoria_ligacoes"]').find('[id^="f_"]')

Related

How to open display block using div name?

I have one problem in display the block using div name .Here My code
<button onClick="reply_click()">&#10799</button>
<div id='id' name='name' style="display: none;" >I am comming..</div>
<script>
function reply_click() {
//document.getElementById('id').style.display='block';
document.getElementsByName('name').style.display='block';
}
</script>
Using div id it will display the block ,but using div name it's not working
Any body give the sugesstion ?
Thanks in advance
Because getElementsByName returns an nodelist not a single element, so There should be
document.getElementsByName('name')[0].style.display='block';
DEMO
I think name is not an legal name to use it as value for name attribute. If this is the case, then use a proper legal name to use it as value of name attribute.
And, anyways try with different name as:
document.getElementsByName('divName')[0].style.display='block';

Javascript select element with complicated ID

need some help! am trying to get the value of the below input id "j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" and have tried jquery and javascript such as: document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:3:j_id63") but keep getting a null result. ID can't be changed either, any help appreciated
<td class="sf42_cell_bottom_light"><span id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61"><input id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" maxlength="200" name="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" size="20" type="text" value="717474417"></span></td>
Use this:
$("[id='j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61']")
By the way, since you are apperently using JSF, this is a good practice to set id to each component to avoid such horrible ids (who can changes if you add/remove components).
See more information in this thread:
Handling colon in element ID with jQuery
Do you have any control of the element? Can you add a class to it?
var val= document.getElementsByClassName("TheClassName");
Or you can get the TD with class sf42_cell_bottom_light (if it is unique) then get its INPUT elements by:
var theTd= document.getElementsByClassName("sf42_cell_bottom_light");
var val = theTD.getElementsByTagName("INPUT");
I need to see more of the HTML to give you an better answer.
You may need to escape colon in your id .So
try this
function RemoveInvalidCharacter(myid) {
return '#' + myid.replace(/(:|\.|\[|\])/g, "\\$1");
}
And call like this
$(RemoveInvalidCharacter('j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61'));
Have a look at How do I select an element by an ID that has characters used in CSS notation
I have tested this code:
<td class="sf42_cell_bottom_light">
<span id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id61">
<input id="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" maxlength="200" name="j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63" size="20" type="text" value="717474417">
</span>
</td>
<script type="text/javascript">
document.write(document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63").value);
</script>
in FF, IE, Chrome (the latest versions)... and seems to work ok... ar you sure it is about this id?
Replace:
document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:3:j_id63")
with
document.getElementById("j_id0:j_id2:j_id4:j_id54:0:j_id59:0:j_id63")
The id is different.
http://jsfiddle.net/wNePW/

JQuery Closest element in same node

Using JQuery, how can I select the closest element of a certain type that is in the same node as the element I am using?
For example:
From the $('#errorDate') and want to select the closest span?
<td width="318" class="body">
<input name="errorDate" type="text" id="errorDate" class="txtInputs" />
<span class="errorDes"id="errorDes"></span>
</td>
for more details, if you're interested take a look at https://github.com/gilmoreorless/jquery-nearest
You could simply do
$('#errorDate').next('span')
Or Just
$('#errorDate').next()
[updated with fiddle]
if you want to select the first next sibling go for :
$('#errorDate').nextAll('span:first')
and for first previous :
$('#errorDate').prevAll('span:first')
check out the fiddle
There are many options for selecting this,
var firstspan=$('#errorDate').closest('td').find('span:first-of-type');
or
var firstspan=$('#errorDate').closest('td').find('span.errorDes');
or
var firstspan=$('#errorDate').next('span.errorDes');
or
var firstspan=$('#errorDate').closest('td').find('span:first');

change value of h:outputtext using jquery

i have one component OutputText , i want to change its value using jquery,
my component is,
<h:outputText id="txt_pay_days" value="0"
binding="#{Attendance_Calculation.txt_pay_days}"/>
thanks for any help...
<h:outputText> will be converted to <span> in raw HTML So,
Use id of the DOM and play with jQuery
${"#txt_pay_days"}.text("New Value To Set");
The <h:outputText> renders a HTML <span> with the value as its body.
<span id="txt_pay_days">0</span>
The jQuery .val() function works on HTML input elements like <input type="text"> only. The <span> isn't an input element at all. Instead, you need to use the jQuery .text() function.
$("#txt_pay_days").text("123");
try this..
$('#txt_pay_days').val('valueYouWantToInsert');

Prototype - Element with styleclass in element with an id?

First of all: I'm new to Prototype JS Framework!
Until now I worked with jQuery.
In jQuery I am able to get an element by coding:
$('#myitemid .myitemclass').val()
html:
<div id="myitemid">
<input type="text" class="notmyclass" />
<input type="text" class="myitemclass" />
<input type="text" class="notmyclass" />
</div>
But how to do this in prototype?
I tried to code:
$('myitemid .myitemclass').value
but this won't work.
Can U help me plz?
Use $$ which returns all elements in the document that match the provided CSS selectors.
var elemValue = $$('#myitemid input.myitemclass')[0].getValue();
Also input.myitemclass is better than .myitemclass because it restricts search to input elements with class name .myitemclass.
If you want to get the named element myitemid, simply use $('myitemid'). This is equivalent to $('#myitemid') or document.getElementById('myitemid'). Your case is more complex, since you want to select a child of a named element. In that case you want to first find the named element, then use a selector on it's children.
$('myitemid').select('input.myitemclass')
Then, to access it's value (since it's a form element), you can add .getValue().
$('myitemid').select('input.myitemclass').getValue()
Should be faster
$("myitemid").down("input[class~=myitemclass]").value

Categories

Resources