What am I missing here?
As part of an answer to How can i change options in dropdowns if it is generated dynamically?
I have an issue inside an onchange. I want to set all the siblings values to the value of the changed select
$("select").on("change",function() {
var idx=$(this).val();
console.log($(this).attr("id"),$(this).val())
$(this).siblings("select").each(function() {
$(this).val(idx);
});
});
Here is the generated code in a JSFIDDLE
I have seen
How do i get the value of all other dropdowns when one of them is changed
but I prefer to find the reason for my error
You are using the val method as a property.
var idx=$(this).val;
// ----^
http://jsfiddle.net/Vr5Je/
You can also use the val method instead of each:
$("select").on("change", function() {
$(this).siblings("select").val(this.value);
});
http://jsfiddle.net/Pq2vq/
Related
This function toggles all checkboxes in a given column of an HTML table when selecting or deselecting a checkbox.
function GlobalCheckboxSwitch0(checkboxID, tableID)
{
if ($(checkboxID).is(':checked'))
{
$('#table0 input[type=checkbox]').each(function ()
{
$(this).prop("checked", true);
});
}
else
{
$('#table0 input[type=checkbox]').each(function ()
{
$(this).prop("checked", false);
});
}
}
Invoking it like this works only for table0:
<input type="checkbox" id="selectall0" onClick="GlobalCheckboxSwitch0('#selectall0', '#table0')">
The problem is that table0 is hard coded in the function.
With the help of the second parameter tableID I would like it to work for any table ID.
selectall0 is the ID of the checkbox.
Trying to refer the tableID parameter like this:
$('$(tableID) input[type=checkbox]')
yields a syntax error.
What should I change in the way I refer to tableID?
Thank you.
Use the tableID selector the same way you do for checkboxID along with find().
You can also skip the if and the each and do the following:
function GlobalCheckboxSwitch0(checkboxID, tableID) {
var allChecked = $(checkboxID).is(':checked');
$(tableID).find('input[type=checkbox]').prop('checked', allChecked );
}
jQuery will do the each internally
It's a jQuery selector syntax error, to be precise - it's not actually a JavaScript syntax error.
You need to learn concatenation, which means joining strings and variables/expressions.
As it stands...
$('$(tableID) input[type=checkbox]')
...will be executed literally. In other words, you're telling jQuery to go find an element whose tag name is tableID.
Instead you need to concatenate between the formulaic and dynamic parts of the jQuery selector. Concatenation in JavaScript is done via +.
$('#'+tableID+' input[type=checkbox]') //<-- note #
I have few checkboxes and those elements contain a custom attribute named data-id. For example:
<input class="testCheckbox" icheck="" ng-model="Model" data-id="57e3"type="checkbox">
I want to receive an array of ids by finding it by class name and type of the element. Currently I have something like this and it works:
var testIds = [];
$('input.testCheckbox[type="checkbox"]:checked').each(function() {
testIds.push($(this).attr("data-id"))
});
I am wondering if there is inline function in jQuery which can return the same result? I've tried with this code but it only returns first value:
console.log($('input.testCheckbox[type="checkbox"]:checked').attr("data-id"));
I do not know what I am doing wrong? Best regards.
There's no inline function to do this, but you can shorten your code by using map() instead:
var testIds = $('input.testCheckbox[type="checkbox"]:checked').map(function() {
return $(this).data('id');
}).get();
Hi I have an array like this.
var i;
for(i=0;i<10;i++){
$('<input/>').attr('type','text')
.attr('name','TxtBx_[]')
.attr('id','TxtBx_' + i)
.attr("readonly","readonly")
.attr('value',i)
.addClass('txtbx')
.appendTo($div);
}
And I prints the 10 input boxes well.
Later I need to get the number of text boxes I have created. So I'm using
var myarr=document.getElementsByName('TxtBx_');
var numberofElements=myarr.length;
but when I put an alert to check the value of numberofElements it gives me always 0. The length of the array must be 10. Could someone please let me know the mistake I have made.
The elements' names are TextBx[], not TxtBx_.
var myarr=document.getElementsByName('TextBx[]');
var numberofElements=myarr.length;
Element names are TextBx[] and TxtBx_ is a class name
var myarr=document.getElementsByName('TextBx[]');
var numberofElements=myarr.length;
Read getElementsByName() documentation for more information
var numberofElements = document.getElementsByName("TextBx[]").length;
Name of textbox is 'name','TxtBx_[]' getting by TxtBx_.
Because no element has name TxtBx_ . It's TextBx[] actually.
Since you are alrady using jQuery, you can find by class like below,
$('.txtbx').length
Few other things, I would like to add here.
attr accepts a object too. So, you can pass all inputs at once. Also, you can pass attributes as second arguement while dynamically creating input. Also, according to jQuery docs, you should specify type in input type while dynamically creating them or it won't work in some IE.
So, try something like this,
var i;
for(i=0;i<10;i++) {
$('<input type="text"/>',{
'name': 'TxtBx_[]',
'id': 'TxtBx_' + i,
'readonly':'readonly'
'value': i,
'class': 'txtbx'
}).appendTo($div);
}
Try it
$("input.txtbx").length;
Just use the class to get them:
var numberofElements = $('.txtbx').length;
Javascript woes today... I'm struggleing to get a selector right.
I need to select elements, that don't have jqmData(bound) === true in a jQuery chained statement. This is what I have:
var swipesOnPage = $('div.photoswipeable');
...
swipesOnPage.not(':jqmData(bound="true")')
.jqmData('bound', true )
.each( function(){
// do stuff
});
I need to flag lables that received their "treatment" so I'm not re-running code on them. However I cannot get the selector right, so all elements, which I have set jqmData("bound",true) get re-selected every time.
Question:
How to use the not or filter statement correctly with data-attribute?
Thanks!
var $someCollection = $('div.photoswipeable').filter(function() {
return $(this).jqmData("bound") !== true;
});
Got a question for you javascript gurus out there. I'm creating a sidebar tool that is comprised of a few different text input fields. The purpose of this tool is to edit copy on a template. I've tried to pass the data entered into the field onchange, but I'm running into problems dumping the data into my js object. This is somewhat what I have in mind:
$('myInputField').(function(){
$(this).onChange(){
// write to variable X
}
});
Essentially I want to have what I'm typing in the input be mimicked live and then I can parse the changes to my database.
$('#myInputField').(function(){
$(this).onkeyup(){
x = this.value;
}
});
or more succinctly:
$('#myInputField').onkeyup(){
x = this.value;
});
You're just looking for the value that's in myInputField within that event handler? Something like this?:
$('myInputField').(function(){
$(this).onChange(){
x = $(this).val();
}
});
I don't remember off the top of my head if this is already a jQuery object. If it is, then this should work and perhaps skip a little bit of overhead:
x = this.val();
Additionally, you can explicitly reference the field with a normal jQuery selector if this is ever overridden with a different context, or if you want to reference other fields as well, etc.:
x = $('myInputField').val();
The problem is, on IE, the onchange event doesn't work on INPUT elements. Thus, you have to use the onkeypress or the onblur event depending on what you want to do.
JS way:
document.getElementById('myInputField').onblur = function() {
var x = this.value
}
jQuery way:
$('#myInputField').blur(function() {
var x = this.value
})
Wouldn't a simply keyup event on the input fields be sufficient?
jQuery:
$('textarea').keyup(function() {
$('#foo').html($(this).val());
});
HTML:
<textarea></textarea>
<div id="foo"></div>
jsFiddle example.