I have span element selected and I want to traverse to input:checkbox. I have tried using next(),nextAll(),nextElementSibling. But as input element is not sibling of span it is not working. Any other way I can select the input element?
Below is my code:
<span>This element is selected via javascript</span>
<div>
</div>
<div class="mb_content">
5 attachement
<br />
<span class="error_star mr_1"><b>Size:5 MB</b></span>
</div>
<div class="checker f_left">
<label for="rec_787128222"> </label>
<input type="checkbox" class="mb_check" /><!--i want to select this-->
</div>
PS: Actual structure is bit different but I can not paste it over here. This is kind of replica for it.
You can go to the parent element of the selected DOM element and then select the input.
Try it like this:
// <the element> . <the parent> . <select the input element>
element.parentNode.querySelector('.mb_check')
If you really want to use nextSibling()...
var el = document.querySelector("#foo").nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.children[1];
el.style.display = 'none';
<span id="foo">This element is selected via javascript</span>
<div>
</div>
<div class="mb_content">
5 attachement
<br />
<span class="error_star mr_1"><b>Size:5 MB</b></span>
</div>
<div class="checker f_left">
<label for="rec_787128222"> </label>
<input type="checkbox" class="mb_check" />
<!--i want to select this-->
</div>
Without any checks for null, you can try this:
document.querySelectorAll('.error_star.mr_1')[0].parentNode.nextElementSibling.children[1];
Related
I want to get the specific input element on clicking on the click button. And there might be more input element with this class "quan" in the future. So, I want to get the specific input element with class "quan" on clicking the click button which associate with it. The way I did in the js file only give me the first element of that class name. How do I get the specific element? Thanks for your help.
HTML
<div>
<div>
<button onclick="click(event)>Click<button>
</div>
<div>
<input class="quan" type="number" min="0" value="2"/>
</div>
</div>
Javascript
function click(event){
console.log(document.querySelector(".quan"));
}
Use a selector finding the common ancestor (using closest) of them and find the correct child.
function my_click(elem) {
// ideally elem.closest(".group-name")
// but this will also do
var parent = elem.parentNode.parentNode
var child = parent.querySelector(".quan")
console.log(child.value);
}
<div>
<div>
<button onclick="my_click(this)">Click</button>
</div>
<div>
<input class="quan" type="number" min="0" value="1" />
</div>
</div>
<div>
<div>
<button onclick="my_click(this)">Click</button>
</div>
<div>
<input class="quan" type="number" min="0" value="2" />
</div>
</div>
How would I go about using wrap() to wrap multiple elements (with different classes) inside a <div>?
For example, on the form I'm working on there is a big list of checkbox inputs and labels in the form of:
<input>
<label>
<input>
<label>
etc
I'm wanting to wrap a <div> around the input and label, so the result would be:
<div>
<input>
<label>
</div>
<div>
<input>
<label>
</div>
Thanks!
You can use the .wrapAll() method.
$('form > input').each(function(){
$(this).next('label').andSelf().wrapAll('<div class="test"/>');
});
If your markup has always the exact same order, I'd prefer to use:
var $set = $('form').children();
for(var i=0, len = $set.length; i < len; i+=2){
$set.slice(i, i+2).wrapAll('<div class="test"/>');
}
Should be significant faster.
Ref.: .wrapAll(), .andSelf(), .slice()
$('input+label').each(function(){
$(this).prev().andSelf().wrapAll('<div>');
});
If you have something like this:
<input id="input1">
<label id="label1">
<input id="input2">
<label id="label2">
Then you can use jQuery:
jQuery("#input1").next().andSelf().wrapAll('<div id="newDiv" />');
jQuery("#input2").next().andSelf().wrapAll('<div id="newDiv" />');
and get this:
<div id="newDiv">
<input id="input1">
<label id="label1">
</div>
<div id="newDiv">
<input id="input2">
<label id="label2">
</div>
Worked for me :-)
jQuery function wrapAll allows you to wrap multiple elements but if you have a DOM like you wrote then it won't work too well as you can't easily match a part of label and input with a selector. I suggest adding some classes to each part and then using wrapAll.
<input class="i1"/>
<label class="i1"/>
<input class="i2"/>
<label class="i2"/>
$('.i1').wrapAll('<div/>');
$('.i2').wrapAll('<div/>');
This will give you
<div>
<input class="i1"/>
<label class="i1"/>
</div>
<div>
<input class="i2"/>
<label class="i2"/>
<div>
Working on revamping some old code and needing some help on this last addition. Basically can have a variable number of checkboxes and need to get the labels text to any of those checkboxes and append that text to another div. Have rewritten this a ton of times and used a lot of others code but nothing seems to be working. Have seen several similar questions on here but none of those have worked for a solution to this problem.
Problem:
Get a labels text associated to it's input checkbox. Then once that text value is gathered append it to a separate div.
Note:
The checkboxes have an ID and a VALUE that are the same because of some different code versions just trying to get them to work. Would like a solution using VALUE only.
HTML:
<a cid="38" href="javascript:void(0);" class="cat_filter">
<div class="cat-filter_checkbox">
<input class="cat_filter_checkbox" name="" type="checkbox" value="38" id="38">
<label for="38">Category ONE</label>
</div>
</a>
<a cid="14" href="javascript:void(0);" class="cat_filter">
<div class="cat-filter_checkbox">
<input class="cat_filter_checkbox" name="" type="checkbox" value="14" id="14">
<label for="14">Category TWO</label>
</div>
</a>
<div id="labelName"></div>
JS:
$(".cat_filter").live('click', function() {
$(this).find("input:checkbox").attr("checked", true);
var labelName = $(this).find("label[for='"+$(this).attr("id")+"']").text();
labelName.appendTo('#labelName');
});
Fiddle:
http://jsfiddle.net/wfuller/o25z9w0f/1/
Any help would be greatly appreciated.
So this should solve your problem:
$(".cat_filter").on('click','input',function() {
//On click on an input field. if this isn't OK tell me and I will change it again.
$('#labelName').html($('label[for='+$(this).prop('id')+']').html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a cid="38" href="javascript:void(0);" class="cat_filter">
<div class="cat-filter_checkbox">
<input class="cat_filter_checkbox" name="" type="checkbox" value="38" id="38">
<label for="38">Category ONE</label>
</div>
</a>
<a cid="14" href="javascript:void(0);" class="cat_filter">
<div class="cat-filter_checkbox">
<input class="cat_filter_checkbox" name="" type="checkbox" value="14" id="14">
<label for="14">Category TWO</label>
</div>
</a>
<div id="labelName"></div>
Greetings from Vienna
var nodeList = document.querySelectorAll('input[type ="checkbox"]');
var div = document.getElementById('myDiv');
for (node in nodeList) {
div.innerHTML += node.text; //or label if you set that attribute on the element
}
Does not rely on jQuery
Is there a way to check which like option is selected for which text box when submitted.
As shown below user may select like only for some text values. The html tags are dynamically generated based on the object parameters
for(int i = 0 ; i < object ; i++)
{
if(obj.textbox)
<input type="tex" id="obj.id"/> <input type="checkbox" id="obj.id"+"#"/>
else
<select> ... </select>
}
Right now what I do is assign a text "#" as shown above to the check box and after the form is submitted iterate all the checkbox items and get the selected value and split it and get the text value and append both value and like if selected, with | symbol and send the request.
Is there a better way to get the entered text values and check if the like option is selected for that.
This is my View Code.
<div ng-repeat="filter in filters">
<div class="content-pad">
<fieldset>
<label for="textinputID1"><p class="lead">
{{filter.dsply_name}} :
</p>
</label>
<div class="field-group" nowrap>
<input ng-if="!filter.listFlag" type="text" id='filter.atrbt_name' class="span3">
<button type="button" class="reset-field hide-text">Reset field</button>
<label class="checkbox" ng-if="!filter.listFlag">
<input id='filter.atrbt_name' type="checkbox">
<i class="skin"></i> <span>Like</span>
</label>
</div>
<div class="form-row">
<div class="row-fluid-nowrap">
<div class="span12">
<select ng-if="filter.listFlag" class="mod-select span12" ng-model="filterSelectOption" ng-options="value.displayValue as value.displayValue for value in filter.listValues">
<option value="" selected="selected">Select an Option</option>
</select>
</div>
</div>
</div>
</fieldset>
</div>
Bind the click event to submit button, in js callback function, get values & do check.
I need to somehow have data-rel value to input field and remove name from same input field on specific class.
The code i had done so far is working to remove name from that specific field. but i can't add data-rel to that same field.
Here is the code.
$('.vf-sortable-holder').each(function() {
var empty_sortable = $(this).closest('.option').find('.empty-sortable').find('input');
var sortable_name = empty_sortable.attr('name');
input.attr('data-rel', sortable_name);
empty_sortable.removeAttr('name');
});
So html look like this
<div class="option">
<div class="vf-sortable-holder">
<div class="empty-sortable hidden">
<input type="text" name="example">
</div>
</div>
</div>
<div class="option">
<div class="vf-sortable-holder">
<div class="empty-sortable hidden">
<input type="text" name="example">
</div>
</div>
</div>
So my js code works to remove name attribute but i actually need to change name with data-rel either to remove name from html with js code and add data-rel or somehow to rename name to data-rel in the end i need it to look like this:
<div class="option">
<div class="vf-sortable-holder">
<div class="empty-sortable hidden">
<input type="text" data-rel="example">
</div>
</div>
</div>
<div class="option">
<div class="vf-sortable-holder">
<div class="empty-sortable hidden">
<input type="text" data-rel="example">
</div>
</div>
</div>
Is this what you are looking for?
$('.vf-sortable-holder').each(function() {
var empty_sortable = $(this).find('input');
var sortable_name = empty_sortable.attr('name');
empty_sortable.attr('data-rel', sortable_name).removeAttr('name');;
});
Also remove the '.' from your vf-sortable class name in the HTML.
Selecting .vf-sortable-holder, then the parent .option, then the .empty-sortable and finally the input, all inside loops, seems like jumping through a lot of hoops ?
$('.option .vf-sortable-holder .empty-sortable input').attr('data-rel', function() {
return this.name;
}).prop('name','');
Remove the . in the class name(.vf-sortable-holder)
<div class="option">
<div class="vf-sortable-holder">
<input type="text" name="example" />
</div>
</div>
<div class="option">
<div class="vf-sortable-holder">
<input type="text" name="example2" />
</div>
</div>
then
jQuery(function () {
$('.vf-sortable-holder input').attr('data-rel', function () {
var name = this.name;
$(this).removeAttr('name');
return name;
})
})
Demo: Fiddle