I am running into an issue with some jQuery code. I cannot get the selector to function properly. The selector is suppose to wrap all inputs on my page with a div except for checkboxes and radios. Here is the jQuery selector I am using to try and accomplish this:
//Wrap input tags in col-sm-9
$("#custom-form-builder input[type!=radio], input[type!=checkbox]").not('#custom-form-builder .datepickercontroller').wrap('<div class="col-sm-9">');
Here is my HTML code:
<div class="form-group required checkboxerrr">
<label class="col-sm-3 control-label">Multiselect</label>
<div class="col-sm-9 control-class">
<div class="checkbox check-info">
<input type="checkbox" checked="checked" value="1" id="checkbox5">
<label for="checkbox5" class="no-asterisk">Action</label>
</div>
<div class="checkbox check-info">
<input type="checkbox" checked="checked" value="1" id="checkbox6">
<label for="checkbox6" class="no-asterisk">Mark as read</label>
</div>
</div>
</div>
After this jQuery selector is executed, the radios are not wrapped in this: <div class="col-sm-9">. However, my checkboxes are. Here is the final HTML after the jQuery selector is executed:
<div class="form-group required checkboxerrr">
<label class="col-sm-3 control-label">Multiselect</label>
<div class="control-class col-sm-9">
<div class="checkbox check-info">
<div class="col-sm-9"><input type="checkbox" checked="checked" value="1" id="checkbox5"></div>
<label for="checkbox5" class="no-asterisk col-sm-3 control-label">Action</label>
</div>
<div class="checkbox check-info">
<div class="col-sm-9"><input type="checkbox" checked="checked" value="1" id="checkbox6"></div>
<label for="checkbox6" class="no-asterisk col-sm-3 control-label">Mark as read</label>
</div>
</div>
Any help is appreciated!
Your selector is invalid for input type. You have to use not selector.
$("#custom-form-builder input:not[type=radio], input:not[type=checkbox]").not('#custom-form-builder .datepickercontroller').wrap('<div class="col-sm-9">');
Based on your original code I guess you want the input elements to satisfy the following conditions:
A descendant of #custom-form-builder
Neither a checkbox or a radio element
Does not have the class datepickercontrol
However, your selector, "#custom-form-builder input[type!=radio], input[type!=checkbox]", is a little problematic (in terms of logic), as it:
Ignores non-radio inputs in #custom-form-builder, but
Ignores non-checkbox input in the entire HTML document
There are several ways that you can do this.
Use .not(), a jQuery method
The advantage of using .not() is that you can always access the parent element and/or perform DOM traversal of the cached elements within jQuery by chaining additional methods.
$("#custom-form-builder :input")
.not('input[type="checkbox"], input[type="text"], .datepickercontrol')
.wrap('<div class="col-sm-9" />');
Bonus: Use .filter(), a jQuery method
The .filter() function allows you to conditionally remove items that are initially fetched by your selector. You can then apply chained methods after this function onto a subset of elements after filtering. This approach may sound long-winded for a simple application, but is very useful for complicated conditional filtering.
$("#custom-form-builder :input")
.filter(function() {
return ($(this).attr('type') != 'checkbox' && $(this).attr('type') != 'radio' && !$(this).hasClass('.datepickercontrol'));
})
.wrap('<div class="col-sm-9" />');
wrong syntax in your code try this:
$("#custom-form-builder").not('input[type=radio]').not('input[type=checkbox]')not('#custom-form-builder .datepickercontroller').wrap('<div class="col-sm-9">');
Related
I have this HTML code
<div class="option-wrapper">
<label class="">
<input type="checkbox" name="name" value="1" data-type-xml="select" aria-label="Untitled">
<span lang="" class="option-label active">1</span>
</label>
<label class="">
<input type="checkbox" name="name" value="2" data-type-xml="select" aria-label="Untitled">
<span lang="" class="option-label active">2</span>
</label>
</div>
im trying to find the labels and to set a "style="display: none;"
like this <label class="" style="display: none;>
my problem is, I only need one of the labels in this div. But I don't have a class name or id to find one label. Do u guys know a solution for this?
Use document.getElementsByTagName('label') instead for all end then get them with the array offset. Or - to select the first - use document.getElementByTagName('label'). Notice the singular version of the second selector.
Or, a more general selector which you can use with either classes or tags or any other query string would be document.querySelector('label') or document.querySelectorAll('label')
How to show and hide divs based on the checkbox checked? I'm using the below code in angular js. I have 3 checkboxes, if one checkbox is clicked the respective div should be shown and the other div should be hidden.
<label class="checkbox-inline" style="margin-top: 7px;">
<input type="checkbox" id="chkSmall" name="small" class="bgCheck" value="small" data-ng-model="ShowSmall" data-ng-change="visibleSmall()" />
Small Clock
</label>
<label class="checkbox-inline" style="margin-top: 7px;">
<input type="checkbox" id="chkMedium" name="medium" class="bgCheck" value="medium" data-ng-model="ShowMedium" data-ng-change="visibleMedium()" data-ng-init="ShowMedium=true" />
Medium Clock
</label>
<label class="checkbox-inline" style="margin-top: 7px;">
<input type="checkbox" id="chkBig" name="big" class="bgCheck" value="big" data-ng-model="ShowBig" data-ng-change="visibleBig()" />
Large Clock
</label>
<div data-ng-show="ShowSmall">
Small Clock
</div>
<div data-ng-show="ShowMedium">
Medium Clock
</div>
<div data-ng-show="ShowLarge">
Large... or Big Clock?
</div>
JS Fiddle
We can use ng-show and put a truthy / falsy value inside, so the DOM element with that attribute will be shown / hidden depending on that variable.
<div data-ng-show="ShowSmall && !ShowMedium && !ShowLarge">
Small Clock
</div>
When ShowSmall is true and the other two is false, that <div> will be shown. Try interact with the Fiddle to see if that fits your needs!
You may also want to checkout NgIf which instead of hiding, it removes the DOM element from the DOM tree.
Side note: If you only wants one to be shown, you may consider using radio buttons instead of checkboxes. JS Fiddle
I'm using i18next to translate my form. It works fine but I have problems with nested items, for example:
<div style="margin-bottom: 25px" class="input-group">
<div class="checkbox">
<label class="form" data-i18n="form.checkbox">
<input type="checkbox" name="checkbox" value="true" required>
</label>
</div>
</div>
After applying the translation, the actual HTML code is like this:
<div style="margin-bottom: 25px" class="input-group">
<div class="checkbox">
<label class="form" data-i18n="form.checkbox">
translated value (no more <input> tag!)
</label>
</div>
</div>
It overwrites the innerHTML with the translation string.
Instead I need to "save" existing items and append the translation after them.
What is the correct use of i18next on a checkbox form entry?
I had the same problem and I solved it like this:
$('[data-i18n]').each(function each() {
const el = $(this);
const contents = el.contents();
el.text(i18n.t($(this).attr('data-i18n')))
.append(contents);
});
Edit:
The above is oversimplifying the problem because, as you pointed out, it won't work for custom attributes.
Therefore I searched a bit more and I found out it's already supported by jquery-i18next#append-content like this:
<label class="form" data-i18n="[append]form.checkbox">
<input type="checkbox" name="checkbox" value="true" required>
</label>
You can either specify a custom attribute or one of the special attributes like prepend, append, etc. to specify where you want the translated text to appear. More info on jquery i18next doc
Example on jsfiddle
I solved in this way:
<div class="checkbox">
<label class="form">
<input id="input_flag2" type="checkbox" name="disclaimer2" value="true" required>
<span data-i18n="form.checkbox"></span>
</label>
</div>
The span tag does the trick, embedding the translated content.
I have some elements in my document like:
<div class="checkbox-inline">
<label><input id="myinputid" value="False" type="checkbox"/>mytext</label>
</div>
I can access get the text using:
$("#myinputid").parent().text();
This returns mytext as I had hoped it would. That is:
$("#myinputid").parent().text("newtext");
Changes my initial element to
<div class="checkbox-inline"><label>newtext</label></div>
How can I change the text part without removing the input? Or do I have to reconstruct it?
If there's a better way to structure my checkboxes to begin with, that would be an acceptable alternative.
(1) Using the "for" attribute would be one option: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Using_the_for_attribute
Since the <input> is no longer child of the <label>, the input won't be affected by your changes with text().
<div class="checkbox-inline">
<label for="myinputid">mytext</label>
<input id="myinputid" value="False" type="checkbox">
</div>
(2) Another option would be to restructure as:
<div class="checkbox-inline">
<label>
<span>mytext</span>
<input id="myinputid" value="False" type="checkbox">
</label>
</div>
Then you can change the span's text without modifying the input. A span within a label is allowed according to here: Is <div> inside <label> block correct?
(3) Here might be a possible solution for your original HTML structure: jQuery - setting an element's text only without removing other element (anchor)
You can put your text inside an element for example a span and then use the .siblings() function instead of the .parent() function.
<div class="checkbox-inline">
<label>
<input id="myinputid" value="False" type="checkbox">
<span>mytext</span>
</label>
</div>
$("#myinputid").siblings().text("newtext");
I have some AngularJS code to dynamically create form elements based on an array with form details (input type, value, etc.)
Here's the example code I have for a text input:
<div ng-repeat="input in input_array">
<div ng-switch on="input.input_type">
<div ng-switch-when="text">
<label class="item item-input">
<input type="text" placeholder="Hello World">
</label>
</div>
</div>
</div>
As you can see, the top-level div is repeated for every form element in the array. The problem, is that when input.input_type equals "text", it doesn't show unless I remove the label tags! I've tried doing label tags without any attributes (<label>...</label>) and it still doesn't show the input unless I remove them.
This is pretty strange, does anyone have any ideas why it would do that? Thanks!
EDIT: Now I've tried removing the input and putting text in (<label>Hello!</label>), and it shows up.....so it just doesn't allow inputs wrapped in a label element? o.O
You need to close your input tag.
<div ng-repeat="input in input_array">
<div ng-switch on="input.input_type">
<div ng-switch-when="text">
<label class="item item-input">
<input type="text" placeholder="Hello World"/>
</label>
</div>
</div>
</div>