How can I verify all the items listed in a combo box? Like for example I want to check if a combo box have "item1" "item2" "item3". How do I output all options out and check?
Here's how to excess the combobox:
Ext.ComponentQuery.query('combobox[name=boxname]')[0];
Just access the store of your box and interrogate it. For example:
var store = Ext.ComponentQuery.query('combobox[name=boxname]')[0].getStore();
console.log(store.getById('item1'));
If item1 is not there the result will be null.
UPDATE:
Based on conditions lets say, I want to be able to validate the combo
box that it only has "item1" and "item2", not any more or any less.
Given that say the variable target contains what you want in your combo, you can verify your combo this way:
var target = ['item1', 'item2'],
combo = Ext.ComponentQuery.query('combobox[name=boxname]')[0],
check = function(combo, target) {
var store = combo.getStore();
if (target.length !== store.getTotalCount()) {
return false;
}
var result = true;
store.each(function(item){
if (!Ext.Array.contains(target, item.getId())) {
result = false;
return false;
}
});
return result;
};
console.log(check(combo, target));
The method check will return true if the combo contains what you want, or false otherwise.
var store = Ext.ComponentQuery.query('combobox[name=boxname]')[0].getStore();
store.each(function(record){
var name = rec.get('name');// instead of name use the attribute you want to use for the validation
if(name === 'code4jhon'){
console.log('this dudes name is code4jhon')
}
});
http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.data.Store-method-each
Related
How to get last choosen option in multiple select?
$('#select').change(function(event) {
...
});
I do not need all values provided by val(), but LATEST choosen option which triggered change.
Thanks
I fear that you can't have it so easily, even with jQuery. But you can store the old values and compare with the current value.
var last = [];
$('#select').change(function(event) {
var val = $(this).val();
var newValues = val.filter(function(element)) {
// You may need a more specific test for your values
return last.indexOf(element) == -1;
});
// newValues are the new selected options in the select
last = val;
});
But WARNING : If the user cancel an option, the change event is triggered too. And newValues will be empty (because there's no new values, only a missing value).
I have 3 groups of radiobuttons, all of them properly named. On submit() I want to check if user selected option from each of groups.
I do that that way:
$('.form').submit(function(){
var selectedUser = $('input[name="selectedUser"]').val();
var searchType = $('input[name="shareType"]').val();
var selectedSearch = $('input[name="selectedSearch"]').val();
console.log(selectedUser, searchType, selectedSearch);
return false; //for testing purposes
});
The problem is that each of three variables return not null values even if none of radiobuttons is selected.
Fact that might be important: each of groups contains more than 1 radiobutton, each radiobutton has distinct value.
You need to test if the radio is selected, you can do this using the :checked pseudo-selector:
var selectedUser = $('input[name="selectedUser"]:checked').val();
var searchType = $('input[name="shareType"]:checked').val();
var selectedSearch = $('input[name="selectedSearch"]:checked').val();
if(selectedUser || searchType || selectedSearch) {
// At least one selected
}
else {
// None selected
return false;
}
Here is a fiddle which demonstrates.
I have a number of checkboxes that are generated from a JavaScript API call from a database. I need to be able to pass the values of the checkboxes which are then selected by the user, and sent to the processing page. The issue is that the checkboxes don't have ID's associated with them(or this wouldn't be a problem) They all have the same name, but no ID's.
What is the best way to find which check boxes are selected, and pass their values to the following page?
One way I started was with an array:
var options = ["option1","option2","option3"];
var option 1 = [0];
var option 2 = [1];
var option 3 = [2];
On the processing page, using:
var option1 = getFromRequest('option1') || '';
var option2 = getFromRequest('option2') || '';
var option3 = getFromRequest('option3') || '';
Is there a better way of doing this?
I've changed the implementation to the following:
var values = []
$("input:checkbox.subIndustry").each(function(){
values.push(this.value);
});
passing the values to the success page with
window.location.href = REGISTER_SUCCESS +'&values='values.join(",")
which should then get the value with
var variablname = getFromRequest('values') || "";
This is returning Undefined. Any help?
An easy way to select them would be something like $("input[type=checkbox]:checked")
However, if you wanted to keep up with them as they are checked, even if they are added after you load, you could create a variable, then asign a delegation to the "change" state of each input that is a checkbox and update this variable on each change.
It's as simple as:
var checked, checkedValues = new Array();
$(function() {
$(document).on("change", "input[type=checkbox]", function(e) {
checked = $("input[type=checkbox]:checked");
// if you wanted to get an array of values of the checked elements
checkedValues = checked.map(function(i) { return $(this).val() }).get();
// make a string of the values as simple as joining an array!
var str = checkedValues.join(); // would return something like: value1,value2,ext...
});
})
Working Example
Since all your checkboxes have the same name, you can retrieve the checked ones using a variation of:
var checked = $('input[name=ckboxname]:checked');
see: :checked selector for more information
you can simply get the values of checked checkboxes by using
$('input[name=checkboxname]:checked').val();
this will give you the value of checkbox which is checked and for all values simply use
each function of jquery.
Turns out, the answer was to utilize indexOf in the underscore.js library. The solution had to be applied in the API being used to send data.
(_.indexOf(values, '9') != -1 ? 1 : '0'),
I'm trying to filter a table with some filters. Some are simple selects, and others are multiples. For the simple ones, that's ok, but not the multiple.
I want to follow this logic :
Passing through the array which contains the filter (filtre_transports)
Passing through the array which contains the value(s) (ligne_transports)
If an element of the 1. isn't in the 2. so not display the line (transports_matches = false)
I made this code :
// Pass through each line of the table
jQuery('#agents_liste tbody tr').not('.vide').each(function() {
var transports_matches = true;
// ligne_transports is an array contains values to compare with the filter
var ligne_transports = jQuery(this).children('td').eq(2).text().split('###');
// filtre_transports is an array contains the selected val of a multi select
jQuery(filtre_transports).each(function() {
var filtre = jQuery(this);
var filtreOk = false;
jQuery(ligne_transports).each(function() {
if (filtre == jQuery(this)) {
filtreOk = true;
return false;
}
});
if (!filtreOk) {
transports_matches = false;
return false;
}
});
});
The problem : When we have filters selected, the result transports_matches is always false.
Btw, I saw this post where the answer is to use classes, but is there a way without them ?
EDIT : You can see the JSFiddle here.
Thanks
Fixed: http://jsfiddle.net/r4mfv/2/
You had a couple of issues:
$(filtre_transports).each is not the way to iterate over an array, you should use $.each(filtre_transports, function() {...}).
You should cast filtre and this to String before comparing them.
currently i am using
var email, fax, sms = false;
if($('#uemail:checked').val() != undefined)
email = true;
if($('#ufax:checked').val() != undefined)
fax = true;
if($('#usms:checked').val() != undefined)
sms = true;
but its such a long way to write it.
is there a better way to write this?
Try this:
if($('#uemail').is(':checked'))
email = true;
Or even shorter:
email = $('#uemail').is(':checked');
You're passing the :checked selector into jQuery's .is() method which returns a boolean value;
http://api.jquery.com/is/
You can use .length, like this:
var email = $('#uemail:checked').length,
fax = $('#ufax:checked').length,
sms = $('#usms:checked').length;
.length is the length of the array of matched elements...if it's not checked, it's 0. And since .length == 0 serves for .length == false in JavaScript you can do the short version above. If you need a true/false, then just do .length != 0 instead :)
Or, another alternative that produces booleans, just use the DOM .checked property:
var email = $('#uemail')[0].checked,
fax = $('#ufax')[0].checked,
sms = $('#usms')[0].checked;
Or, no jQuery at all just use getElementById():
var email = document.getElementById('uemail').checked,
fax = document.getElementById('ufax').checked,
sms = document.getElementById('usms').checked;
An alternative may be to use an associative array and then loop through the keys. It would certainly be more DRY.
// Initialise all the checkbox values as unknown
var items = {
"email" : none,
"fax" : none,
"sms" : none
};
// Loop through each checkbox index
for (var index in items) {
// Get the id of the checkbox
var id = '#u' + index;
// Find out if the checkbox is checked
items[index] = $(id).is(':checked');
}