I have this HTML structure :
<div class="col-sm-3" id="checkbox-cod">
<label class="non-escrow">
<input type="checkbox" name="payment_method[COD]" value="1"> COD
</label>
</div>
and I have this javascript (not jQuery) to select and check the input checkbox :
var kkCod = document.getElementById('checkbox-cod');
kkCod.find('input').checked = true;
but the selector is wrong. it can't select the input and give checked value. how to use find() properly in this case? thank you.
First of all, you can use document.querySelector('#checkbox-cod') instead of getElementById .
As an alternative to jQuery find(), you can chain a call to querySelector like :
document.querySelector('#checkbox-cod').querySelector('input').setAttribute('checked',true)
I don't believe find() is a native method of Element but rather a jQuery method.
You can however use querySelector() like this:
kkCod.querySelector('input').checked = true;
Related
I have this code that gives me all the LABEL inside the HTML element with id "nuovaImmagine":
$.labelImmagine = $("#nuovaImmagine1").find("label");
I know that inside $.labelImmagine there are 3 labels. If I do alert($.labelImmagine.size()); the alert shows "3";
Now I have to get the first element of the array and edit the text of the label.
I tried both $.labelImmagine.get(0).text("Hello") and $.labelImmagine[0].text("Hello") but none works.
Any idea?
Thank you
You don't want the HTML element, you want the jQuery object of that HTML element. I can tell because you're trying to use jQuery methods on it.
Both $().get(0) and $()[0] give you DOM nodes. You need $().eq(0) or $().first(), which return a jQuery object.
It's a bad idea to pollute the $ namespace. I'd rather use
var $labelImmagine = $("#nuovaImmagine1").find("label");
// ^--- no dot.
But yea.... otherwise, simply do like
$.labelImmagine = $("#nuovaImmagine1").find("label");
$.labelImmagine.eq(0).text("WOOOOO");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nuovaImmagine1"><label>TEST</label></div>
and all wrapped inside an IIFE or document ready scope:
jQuery(function($) { // DOM ready and $ alias secured
/**/
});
You can use .eq() and change its text with .text()
$.labelImmagine = $("#nuovaImmagine1").find("label");
$.labelImmagine.eq(0).text('some text');
Check the below snippet
$.labelImmagine = $("#nuovaImmagine1").find("label");
$.labelImmagine.eq(0).text('some text')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nuovaImmagine1">
<label>label 1</label>
<br>
<label>label 2</label>
<br>
<label>label 3</label>
<br>
</div>
If you want to continue using Jquery you would need to re-'jqueryify' the element.
For example
$($.labelImmagine[0]).text("Hello")
This is because by selecting the element by index it is no longer a jquery object, and thus .text() doesn't exist.
Otherwise you could use
$.labelImmagine[0].innerHTML = "Hello"
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_"]')
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/
<div class = "search ui-widget">
<label for = "keyword"></label>
<input type="text" id="keyword" onkeypress="searchKeyPress(event)" placeholder="Search here" required>
<input type="button" id="btnSearch" onclick="loadDeals('search', keyword.value,'')" />
</div>
$('.search input#keyword').Value('');
Basically what I want is to remove the user's input in the text box after the user clicks another menu tab. I tried $('.search input#keyword').Value(''); and $('.search input#keyword').css("value", ''); but it didn't work.
.val() is the right name of the jQUery method, not Value().
You can use jQuery like this:
$('#keyword').val('');
Or you can use plain javascript like this:
document.getElementById('keyword').value = '';
If there are more input fields beside the ones you posted and you want to clear all inputs you can use:
$('.search input').val('');
Here's a pure javascript solution:
document.getElementById('keyword').value = '';
Since HTML id attributes are supposed to be unique I would recommend not using the '#keyword' id in your jquery selector. The solution does work if there's only one text field, but it isn't scalable to multiple text fields. Instead, I would make 'keyword' a class for the input element and use the selector:
$('.search input.keyword').val('');
This is very similar to the solution Sergio gave except it allows you to control, via the 'keyword' class, which input elements have their values cleared.
Use this
$("the_class_or_id").val("");
Link for this: jQuery Documentation
This is introduced in jQuery API. You can use .value in JavaScript, but in jQuery its val(). It gets the value of the object and to clear the value, just add quotes!
JavaScript code would be:
document.getElementById("id_name").value = "";
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