I'm having hard time in to getting the data attribute set to select option on bootstrap selectpicker .
I tried:
$('.selectpicker').on('changed.bs.select', function (e) {
var selected = e.target.value;
console.log("value : ", selected ); // gives selected value
console.log("data attribute: ", $(e.target).data("price"));
});
data attribute always returns undefined
what wrong I'm doing here ?
This works.
$('.selectpicker').on("changed.bs.select", function() {
var dataTypeAttribute = $('option:selected', this).attr("data-type");
});
Just specify id to select
$("#selectidhere").on("change", function () {
var dataname = $("option[value=" + $(this).val() + "]", this).attr('data-name');
alert(dataname);
});
Fiddle Link
$('.selectpicker').on('changed.bs.select', function (e) {
var selected = e.target.value;
console.log("value : "+selected ); // gives selected value
console.log("data attribute: "+$(e.target).attr("data-price"));});
$(".selectpicker").on("changed.bs.select",
function(e, clickedIndex, isSelected, oldValue) {
var arrayOfSelected = $('.selectpicker').eq(0).val();
console.log(arrayOfSelected);
});
It looks weird but it works perfectly so I don't care.
Related
I am trying to work on a worksheet in which user can change the value, but i want that when user change the value the previous value should store somewhere and then can be printed on a change log table on screen
I have tried the following code
$("classPreviousValue").on('focusin', function() {
$(this).data('val', $(this).val());
});
$("classPreviousValue").on('change', function() {
var $prev = $(this).data('val');
var $current = $(this).val();
if ($prev !== $current) {
alert ("Things changed");
$(this).css("color", $currentDayColor);
$("#divChangeLog").html($("#divChangeLog").html() + "<br>Value changed from $prev");
};
});
Classes start with a period .classPreviousValue not classPreviousValue. And try switching on('focusin' to each to loop through all of them without the need for user interaction. Also at the end of the if statement, change data-val to the new value.
$(".classPreviousValue").each(function() {
$(this).data('val', $(this).val());
});
$(".classPreviousValue").on('change', function() {
var $prev = $(this).data('val');
var $current = $(this).val();
if ($prev !== $current) {
alert ("Things changed");
$(this).css("color", $currentDayColor);
$("#divChangeLog").html($("#divChangeLog").html() + "<br>Value changed from " + $prev);
$(this).data('val',$current); //set data-val to new value
};
});
$("#paragraphDuration").bind('keyup', function() {
var fullDuration = $("#fullDuration").val(),
paragraphDuration = $(this).val();
$(this).after(function() {
if ($(this).val() != '') {
$(this).after(fullDuration - paragraphDuration + " min");
} else {
$(this).after("");
}
});
});
after i changed ("#paragraphDuration") many times , this is what i got:
this is not what i want !
how to replce previous .after when changing ("#paragraphDuration") value with new one ?
thank you
You need to overwrite the old value. It's best to not use .after to set the text, just use the .text() method on a predefined span element or so.
So for instance:
html
<input type="text" id="paragraphDuration"><span class="textContainer"></span>
js
$("#paragraphDuration").bind('keyup', function() {
var fullDuration = $("#fullDuration").val(),
paragraphDuration = $(this).val();
$(this).next('.textContainer').text(
$(this).val() !== ''
? (fullDuration - paragraphDuration + " min")
: ""
);
});
I'm able to store text how I want but cant get check boxes to work properly. It is storing the check box values as 'on' regardless if checked or not. How can I set is to store "off" by default and "on" when checked?
something that would achieve this:
var value = $(this).val() && $(this).prop(checked);
JS Fiddle: http://jsfiddle.net/cRJ23/17/
Storage.prototype.setObj = function (key, obj) {
return this.setItem(key, JSON.stringify(obj))
}
Storage.prototype.getObj = function (key) {
return JSON.parse(this.getItem(key))
}
var Survey = {},
Surveys = {},
save = function () {
$('input, select, textarea').each(function () {
var value = $(this).val(),
name = $(this).attr('name');
console.log('Saving');
console.log(name + ':' + value);
Survey[name] = value;
});
if (localStorage.getObj('Surveys') != null) {
Surveys = localStorage.getObj('Surveys');
}
Surveys[$('#FirstName').val() + '.' + $('#LastName').val()] = Survey; //store in big list
localStorage.setObj('Surveys', Surveys);
}
Hope this helps:
var value = $(this).val();
var name = $(this).attr('name');
if($(this).hasClass('checkers')){
value = $(this).is(":checked")
if(value){
value='on';
}else{
value='off';
}
}
http://jsfiddle.net/juvian/cRJ23/22/
You should not use .val to check whether checkbox is selected, use .is('checked')
Instead of using .val()to get the state of a checkbox you should use .prop() or the property .checked
$('input, select, textarea').each(function () {
var value = ($(this).is('[type="checkbox"]')) ? this.checked :$(this).val(),
name = $(this).attr('name');
console.log('Saving');
console.log(name + ':' + value);
Survey[name] = value;
});
Working example: http://jsfiddle.net/cRJ23/24/
Working Fiddle http://jsfiddle.net/jFeLv/
The val function does not work like you would expect with check boxes, the way to get true or false from them is to use the is(':checked') function.
$(this).is(':checked')
The fiddle is a modified version of your code by modifying one line that seems to be working fine by shorthanding an if else for the variable "value" checking to see if it is a checkbox.
($(this).attr('type','checkbox') ? value = $(this).val() : value = $(this).is(':checked'));
I hope this helps.
I have this code on my site. The idea is to hide a specific class when a specific select box value is selected.
This is my code
$(document).ready(function(){
var txt = 'Marketing';
$("div.ginput_container select#input_3_1 option").each(function(){
if($(this).val()==txt){
$('.mar').hide();
}
});
});
The result I'm getting is .mar class being hidden as soon as the page is loaded. I can't see the error, I have also tryied with
var num = 1
but I have the same issue.
$(document).ready(function() {
var txt = 'Marketing';
$("#input_3_1").change(function () {
if ( this.value == txt ) $('.mar').hide();
});
});
Here's the fiddle: http://jsfiddle.net/9Cyxh/
If you want to show $('.mar') when a different option is selected, use toggle instead:
$('.mar').toggle( this.value != txt );
Here's the fiddle: http://jsfiddle.net/9Cyxh/1/
If you want this to also run on page load (before an option is manually selected), trigger the change event:
$(document).ready(function() {
var txt = 'Marketing';
$("#input_3_1").change(function () {
$('.mar').toggle( this.value != txt );
}).change();
});
Here's the fiddle: http://jsfiddle.net/9Cyxh/2/
You don't need the loop in the first place
Attach your select to the change() event handler and that should be it..
$(document).ready(function(){
$("select#input_3_1").on('change', function() {
var txt = 'Marketing';
if(this.value === txt){
$('.mar').hide();
};
}).change()
});
If you only want to hide ".mar" class when the value is changed and it equals "Marketing" try
$("#input_3_1").change( function() {
if( $(this).val().toUpperCase() === "MARKETING" ) {
$(".mar").hide();
}
});
Demo here
$("#input_3_1").change(function(){
if ($("#input_3_1").val()=='Marketing'){
$(".mar").hide();
}
});
I'm trying to change a value inside localstorage. This item is the status of a checkbox. I want, everytime that a checkbox is checked to set the value to true or false of that checkbox. I tried many ways until I realized that there is no way you can change a value without using JSON.
To add the value I use:
localStorage.setItem("status-" + i, $status.is(":checked"));
and to delete I use:
var parentId = $this.parent().attr('id');
localStorage.removeItem("'" + parentId + "'");
Now to change the value I tried:
$itemList.delegate("#status-" + i, 'click', function(e) {
var $this = $(this);
var parentId = this.parent().attr('id');
if ($this.is(":checked")) {
localStorage.setItem("'" + parentId + "'".val("fdgsdagf"));
// Note that alert here works.
}
});
This is how my local storage looks like:
I hope someone could help me. I've been working on it for few days...
Here is a fiddle for it: http://jsfiddle.net/CC5Vw/7/
Thanks alot
look at this: http://jsfiddle.net/Rh4Au/6/ works well..
changes http://jsfiddle.net/CC5Vw/7/ to http://jsfiddle.net/Rh4Au/6/
line 30:
+ "<div class='checkbox'><input type='checkbox' class='test' id='status-" + i + "'></div>"
i chaged to j because i is the length and j is the iterator.
insertion after line 34:
var tempasd = orderList[j].split("-")[1];
if(localStorage.getItem("status-"+tempasd) == "true") {
$("#status-"+j).get(0).checked = true
}
else {
$("#status-"+j).get(0).checked = false
}
}
The code loads the data from localStorage and check in the checked checkboxes.
The tempasd is a temporary variable store the current ID num of the checkbox (because they not always come ascending.
changes from line 99 to 117:
// ON STATUS CLICK
console.log('i=',i,' j=',j, 'k=',k);
$itemList.delegate("#status-" + i, 'click', function(e) { // ON CLICK
var $this = $(this);
var parentId = $this.attr('id');
if ($this.is(":checked")) {
console.log('set ', parentId, 'to foo');
localStorage.setItem(parentId, 'foo');
// localStorage.setItem("'" + parentId + "'".val("fdgsdagf"));
// localStorage.setItem($this.parent().attr('checked', true));
// window.location = "http://mail.aol.com"
}
});
to
// ON STATUS CLICK
console.log('i=',i,' j=',j, 'k=',k);
var tempxx;
for(tempxx = 0;tempxx < j; tempxx++) {
$itemList.delegate("#status-" + tempxx, 'click', function(e) { // ON CLICK
var $this = $(this);
var parentId = $this.parent().parent().attr('id').split("-")[1];
console.log('set ', parentId, 'to foo');
localStorage.setItem("status-"+parentId, $this.is(":checked"));
// localStorage.setItem("'" + parentId + "'".val("fdgsdagf"));
// localStorage.setItem($this.parent().attr('checked', true));
// window.location = "http://mail.aol.com"
});
}
i need the loop because it needs to delegate an event to each checkbox, and also the event must set the localStorage to false when it gets unchecked.
btw the .parent().parent() is unnecesarry now because i fixed at line 30.