jQuery selector to find inputs inside a div - javascript

I have HTML like this:
<div class="s-item s-question">
<label>label text</label>
<div>
<input name="s1" type="checkbox" class="switch-indeterminate k-input"
data-indeterminate="true"
data-on-text="Yes"
data-off-text="No" />
</div>
</div>
Dynamically with jQuery, how can I select that input? I want to determine when a change occurs.
The highest level div will always have class s-item but instead of a checkbox, sometimes I might have a button or a select box, etc.
So I thought maybe $('.s-item').find('select, input, button').change(function() { ... }); would work? But it didn't.
What should I do?

The "change" event is only valid on input, select, and textarea elements. It doesn't work because you are attempting to assign it to a button element.
$('.s-item').find('select, input, textarea').change(function() { ... });
should work.
It would be cleaner simply to assign a class to the items you care about, so you could just do
$(".s-change-watch").change(function() { ... });
which better separates the semantics of markup (like what element type it is) from functionality.

You can simply do the following to get the checkbox then check the value
$('.s-item div input')
or just give the input an id or class and select that.

Related

Use jQuery to set Focus on input before span

I have the following bootstrap html:
<div class="input-group">
<input id="dbTest" class="input-sm input-s datepicker-input form-control dirty" type="text" data-bind="datepicker:DOB" data-date-format="dd-mm-yyyy" readonly="readonly">
<span class="input-group-addon" id="dp3"><i class="fa fa-calendar"></i></span>
</div>
The data-bind is a knockout extension which is all working well and when the focus is on the input all the datepicker works. I created a test for this like so:
$("#dp3").click(function () {
$("#dbTest").focus();
});
What I want to achieve though is the ability to create a global function for the addon button for any other datepickers I create so that I don't have to add ids and a function for every datepicker I create. For example I would want to add say a class called datepicker-addon:
<span class="input-group-addon datepicker-addon" id="dp3"><i class="fa fa-calendar"></i></span>
And then do something like:
$(".datepicker-addon").each(function() {
$(relevant input).Focus();
});
Any ideas on how I could get the relevant input element?
Not sure I fully understand, but given your markup if you are trying to focus on the input without id's etc you could use
$(".datepicker-addon").each(function() {
$(this).parent().find('input').Focus();
})
N.B. as someone mentioned, you might of meant click() in your question rather then each(), in which case
$(".datepicker-addon").on('click', function() {
$(this).parent().find('input').Focus();
})
is what you'd want.
if the span and input are next to each other I would use jquery .prev() function instead of parent then find.
http://api.jquery.com/prev/
$(".datepicker-addon").each(function() {
$(this).prev().Focus();
})
.prev looks at the html elemnet immediatly before the current element.
.prev vs .parrent matters solely on your html structure. Is the input always right before the datepicker? Is there always only one input inside the parent element of the datepicker
The former would seem a much better constraint than the latter from an outsiders perspective.
Assuming that your input tag:
always has class 'datepicker-input'
always comes before span with addon button
you can use following code:
$('.input-group-addon').click(function(){
$(this).prev('.datepicker-input').focus();
});

Clear all html controls except some

I have a form which is consist of Textbox, Textarea, Password and some of the kendo dropdown and combobox. I want to clear all the controls on Clear button click except one textbox and textarea.
I have done following for clearing all controls.
$('#btnClear').on('click', function () {
$(this).closest('form').find('input[type=text], textarea, input[type=password]').val('');
});
I don't know how not to clear some of the controls.
Use the .not() filtering method:
Description: Remove elements from the set of matched elements.
$('#btnClear').on('click', function () {
$(this).closest('form')
.find('input[type=text], textarea, input[type=password]')
.not('foo')
.val('');
});
Where foo is a selector referring to the exceptions (i.e. controls you don't want to clear).
You can achieve the functionality by following method:
Apply some class to controls which you don't want to clear like below:
<div id="parent">
<input type="text" id="textOne" /><br/>
<input type="text" id="textTwo" class="ignoreT" /><br/>
<textarea id="textThree" class="ignoreTA" ></textarea><br/>
<input type="text" id="textFour" class="ignoreT" /><br/>
<button id="clear">Clear</button>
</div>
Now write following code to clear all controls except ignore class controls:
$('#clear').click(function(){
$(this).closest('form').find('input:not(".ignoreT"), textarea:not("ignoreTA")').val('');
});
or you can apply same class(suppose ignore) to all controls and write following code:
$('#clear').click(function(){
$(this).closest('form').find('input, textarea').not('.ignore').val('');
});
See if it works for you or not.
Try to use :not-selector like,
Let someId is a textbox and otherId is that texxarea which should not be empty
$('#btnClear').on('click', function () {
$(this).closest('form').find('input:not(#someId),textarea:not(#otherId)').val('');
});
Also you can use a common class like non-empty-elements with :not like
$('#btnClear').on('click', function () {
$(this).closest('form')
.find('input[type=text], textarea, input[type=password]')
.not('.non-empty-elements')// filter non-empty-elements
.val('');
});
Note that, you need to add non-empty-elements class to those elements which should not be empty
use not()
$(this).closest('form').find('input[type=text], textarea, input[type=password]').not('#myControlId1,#myControlId2').val('');
where #myControlId1 & #myControlId1 are the IDs of controls which you don't want to clear
you can use selector and define with except one like
$(html).not('span:first').remove();
Refer link:
1. jquery remove all elements except for first one
2 How to remove all the <tr> from a table except the first one using jquery
Based on css:- jQuery how to delete or hide all html except selected <div>

jQuery - find all inputs, except the ones descending from div

Well I'm trying to write a validation jQuery plugin, but for that I need to find all inputs inside of a container, which is marked with an attribute. However, that container may have other sub-containers, also marked with attributes, and they may have their own inputs.
I need to select all inputs, descendants of the parent container (accessed by $(this)) which are not descendants of the sub-containers. Is that possible?
Some code to illustrate:
<div data-container>
<input>
<div class="form-group">
<input>
</div>
<input>
<div data-container>
<input>
<input>
<input>
</div>
</div>
I want to select those first three inputs, and ignore the ones inside the children data-container. The one inside the form-group must be selected too.
Use .not() to exclude a selection from an existing jQuery selection:
var yourSelection = $(this).find('input').not($(this).find('[data-container] input'));
JSFiddle (I replaced the $(this) by $('[data-container]:first') in the fiddle for simplicity)
This should work, here http://jsfiddle.net/2Wv7P/
$('div[data-container] input:lt(3)')
You can select based on the parent div like this. Only the first level children are going to be selected based on you given tag, assuming you ID the parent div as #parent
$('#parent > input')
So following this path, if you have to select the parent with $(this), which is to say using 'this', then you can select this same set of 'input's using
$('#' + this.id + ' > input')
For example
see this fiddle

toggleClass() on Parent not working even though the parent is being found

Hi I have the following HTML repeated in my page (obviously the names, for and id attributes change in each instance):
<div class="funkyCheckBox">
<label for="uniqueName"> Whatever Text </label>
<input type="checkbox" name="uniqueName" id="uniqueName" />
</div>
What this does with some CSS is make the give the appearance of a big button, the input is hidden and I add a class to the div depending on the checked value of the input. I use the following JavaScript /jQuery for this
$(".funkyCheckBox").live("click, tap", function(event){
$(this).toggleClass("funkyCheckBoxActive");
var nextCheckBox = $(this).find("input[type=checkbox]");
nextCheckBox.prop("checked", !nextCheckBox.prop("checked"));
});
Now this was all fine and good but during testing I noticed that if you click on the label text the class was not applied and the value of the input isn't toggled... thus I added the following...
$(".funkyCheckBox label").live("click, tap", function(event){
$(this).parent("div").toggleClass("funkyCheckBoxActive");
var nextCheckBox = $(this).next("input[type=checkbox]");
nextCheckBox.prop("checked", !nextCheckBox.prop("checked"));
});
Now this is great as clicking the label text now changes the value of the input however the parent DIV is not taking / toggling the "funkyCheckBoxActive" class. I am unsure why is as I then used console.log($(this).parent("div")) within the callback function and I am outputting the attributes of th dom object. Does anyone know why my toggleClass is not being applied?
Depending on the version of jQuery, your code will work or not.
Note that the browser is already toggling the checkbox when you click on a label that references it; so you would only need to do this:
$('#uniqueName').change(function() {
$(this).parents("div").toggleClass("funkyCheckBoxActive");
});
please use the "on" method instead of "live" as it is deprecated. also the "for" attribute in LABEL Tag points to an existing Id.
here is the corrected and working code:
<div class="funkyCheckBox">
<label for="uniqueName"> Whatever Text </label>
<input type="checkbox" name="uniqueName" id="uniqueName" />
</div>
and
$(".funkyCheckBox label").click(function(event){
$(this).parent("div").toggleClass("funkyCheckBoxActive");
var nextCheckBox = $(this).next("input[type=checkbox]");
var nextCheckBoxValue = nextCheckBox.val();
nextCheckBox.val(! nextCheckBoxValue);
}); ​
​
EDIT: here is the jsFiddle link
http://jsfiddle.net/RUYWT/
EDIT2: #Mike Sav: I have revised your code and it's working now with all possible cases:
http://jsfiddle.net/RUYWT/11/

How do I change the value of an input element?

is it possible to "override/overwrite" an input element fixed value using javascript and/or jquery?
i.e. if i have an input element like this:
<div id="myDiv">
<input type="text" name="inputs" value="someValue" />
</div>
is it possible to make a jquery object of that element and then change its value to something else then rewrite the jquery object to the dom??
I'm trying but obviously I haven't got good results!
I've been trying something like this:
$('input').val("someOtherDynamicValue");
var x = $('input');
$("#myDiv").html(x);
If you just want to manipulate the value of the input element, use the first line of your code. However it will change the value of every input element on the page, so be more specific using the name or the id of the element.
$('input[name=inputs]').val("someOtherDynamicValue");
Or if the element had an id
$('#someId').val('some Value');
Check out jQuery's selectors (http://api.jquery.com/category/selectors/) to see how to get whatever element you need to manipulate with jQuery.
You can directly access the value via the $.val() method:
$("[name='inputs']").val("Foo"); // sets value to foo
Without needing to re-insert it into the DOM. Note the specificity of my selector [name='inputs'] which is necessary to modify only one input element on the page. If you use your selector input, it will modify all input elements on the page.
Online Demo: http://jsbin.com/imuzo3/edit
//Changes on the load of form
$(document).ready(function(){
$('#yourTxtBoxID').val('newvalue');
});
//Changes on clicking a button
$(document).ready(function(){
$('#somebuttonID').click(function(){
$('#yourTxtBoxID').val('newvalue');
});
});

Categories