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>
Related
I have a problem detecting a visibility state of checkbox and I would like to ask you for a help.
I have a dynamicaly loaded part of the page, which looks like:
<div id="box">
<div class="colored">
<input type="checkbox" value="f01" name="mycheckbox">
<!-- some content -->
<div>
<div class="colored">
<input type="checkbox" value="f02" name="mycheckbox">
<!-- some content -->
<div>
<!-- .... -->
</div>
This represents, shall we say, items in some gallery. Every class="colored" div can be VISIBLE or HIDDEN.
Lets say, it is the simple filter, like I want to have visible only class="colored yellow" divs
And now the core of the problem:
I need to loop through whole BOX element, find all checkboxes and by each checkbox, "ask him", if it is visible, and if true, check him.
Unforunately, this doesn't work:
function checkallfav() {
$("#box").find('input[type=checkbox]').each(function () {
if (this.is(":visible")) {
this.checked = true;
}
});
}
//And this doesn't work as well
function checkallfav() {
$("#box").find('input[type=checkbox]').is(":visible").each(function () {
this.checked = true;
});
}
The problem is, that the FIND function returns the whole element, I tried
Console.debug(this); and in firebug, the response was all html element
So, please, anyone has a solution?
Use :visible selector on checkbox itself. Using :visible on selector will filter out only visible elements and then prop can be directly used on those checkboxes.
$("#box").find('input[type=checkbox]:visible').prop('checked', true);
The code can also be shorten as
$('#box :checkbox:visible').prop('checked', true);
Here this refers to native DOM object and they don't have .is() function its a jQuery function thus have to use with jQuery object. Thus $(this).is(":visible") should be used.
$("#box").find('input[type=checkbox]').each(function () {
if ($(this).is(":visible")) {
this.checked = true;
}
});
A simpler way to achieve is by using #Tushar's recommendation
You could use prop() function parameter too:
$("#box").find(':checkbox').prop('checked',function(){
return $(this).is(':visible');
});
This would by the way uncheck any hidden checkbox (if needed).
This can be achieved with .filter() method:
$("#box").find('input[type=checkbox]').filter(':visible').prop('checked', true);
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.
Trying to figure out how to click this button
<input class="button" type="submit" name="checkout" value="Check out">
by using this function
document.getElementBy????('????').click()
or should another function be used?
You can use document.getElementsByName('checkout')[0].click()
You can also use document.getElementsByClassName('button')[0].click()
You can add an id in the input and use dcoument.getElementById or you can use document.getElementsByClassName which'll return you an array.
document.getElementsByClassName('classname')[0].click()
Use this for javascript
document.getElementById("nameofid");
Add an id on your element in the dom and add onclick="(javascript here)" attribute
<input class="button" type="submit" id="nameofid" name="checkout" value="Check out">
Add a function in the javascript to be called by the button using onclick attribute
function myfunction(){
var myvar = document.getElementById("nameofid");
//you may adjust its properties by calling myvar.nameofproperty
//or even call a method myvar.nameofmethod
}
First of all, to be very sure, you should just give your button a unique ID:
<input id="myCheckoutButton" class="button" name="checkout" value="Check out" />
document.getElementById("myCheckoutButton").click();
Basically for your problem and assuming you cannot modify html for some sinister reason...
document.getElementsByName
Would be your choice, howver this works only if you are 100% sure that there is only one element with this name on your document. If its not, it is a little bit tricky but works aswell:
for(var i = 0; i < document.getElementsByName("checkout").length; i++) {
if(document.getElementsByName("checkout")[i].value == "Check out") {
document.getElementsByName("checkout")[i].trigger("click");
}
}
But the very-best option if you are able to implement and use jQuery in your page:
By name:
$(".checkout[name=checkout]").trigger("click");
Or by class and comparing value if you have multiple elements:
$(".checkout").each(function() {
if($(this).val() == "Check out")) {
$(this).trigger("click");
return false;
}
}
There are several. The choice comes down to how specific do you want and/or need to be.
Most specific is getElementById() which will require you to have an id on the element. You can only have one on the page and is very specific.
If you have more than on component on the page and want to attach an event to each one the what you want is to use getElementsByClass() which will return an array of all the elements that have that class.
Finally, if you want to reference form elements you can use the name attribute to manage checkboxes and radio elements. It helps lower the specificity of using a unique id without having to add extra classes to every form element: getElementsByName() which (like getElementsByClass() returns an array of elements. Managing the difference between text inputs and checkbox inputs however is a topic for another question.
This might be an easy one for you, but I'm stuck, so I hope you can help me.
I'm creating checkboxes through a loop and want to specify a text somewhere in the website if a checkbox is clicked.
I'v seen solutions where a make a script for each checkbox, but that could turn out to be alot sometimes (something like this: chckbx.onchange = function(){} )
I'd rather have one function that is called from different checkboxes, but my javascript skills is basicly non-existing :)
This is what i got so far (which ofcourse dosn't work)
http://jsfiddle.net/Sz3BK/130/
You have jQuery tagged in your question, so I'm going to provide a jQuery answer:
You'd use jQuery's on() method to delegate the event to a non-dynamic ancestor of your checkbox:
$('elem').on('change', 'input[type="checkbox"]', function() {
...
});
Where elem is a non-dynamic ancestor of your checkbox.
In your JSFiddle your checkbox isn't dynamic, but assuming it was, the closest non-dynamic ancestor of it would be the document's body. Therefore, we can use:
$('body').on('change', 'input[type="checkbox"]', function() {
testing('hello', '1');
});
JSFiddle demo.
You may want to extend this by passing in "hello" and "1" as data-* attributes:
<input type="checkbox" name="test" data-newvalue="hello" data-spanid="1" />
<input type="checkbox" name="test" data-newvalue="second" data-spanid="2" />
Here I've created two checkboxes with our two data-* attributes. In our jQuery method we can pull these values and pass them into our testing() function using jQuery's data() method:
$('body').on('change', 'input[type="checkbox"]', function() {
testing($(this).data('newvalue'), $(this).data('spanid'));
});
JSFiddle demo.
We can then modify our testing() function to also use jQuery:
function testing(newValue, spanID) {
$('#'+spanID).text(newValue);
}
This pulls our spanID (e.g. "1") and places it within an ID selector $('#1'), then modifies the text using jQuery's text() method. If you wanted to modify the HTML instead, jQuery also has a html() method for this purpose.
Final JSFiddle demo.
because you are adding che checkboxes dynamicly,
to enable the change event for those added later, use code below
$(document).on('change', 'input[type="checkbox"]', function() {
...
});
Change your jsfiddle code http://jsfiddle.net/Sz3BK/136/ like this...
Add <head></head> in HTML code at top..
and change on load to "No wrap - in head"
This code works fine for me:
$('input[name=test]').change(function(){
if($(this).is(':checked'))
{
alert("chk");
// Checkbox is checked.
}
else
{
alert("unchk");
// Checkbox is not checked.
}
});
Check the fiddle. Hope it helps.
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/