I have a range slider that will allow the user to easily change the input. I need to read the value after they change the slider.
I originally tried:
var buzzReview = $( "#Cat_Custom_1" ).val();
But that just gives me the value before the slider is moved (which is blank).
I then considered doing something like this:
$("#Cat_Custom_1").on("change",function(){
var buzzReview = $( "#Cat_Custom_1" ).val();
});
The problem with this is the variable isn't available outside of that function.
How do I obtain the value of the slider and store it in a variable that is accessible to my entire script regardless of when it is changed? IE: User changes slider and I have the value, then the user changes the slider later and again I have the new value.
I am using jQuery 2.1. Here is a fiddle with working code.
I had fork your fiddle, and it work great, the problem is that jquery is case sensitive, thats why you get undefined value
http://jsfiddle.net/zXV4s/8/
if you want to make it into variable, this is the fiddle
http://jsfiddle.net/zXV4s/11/
$(".button").on("click",function(ev){
alert($( "#CAT_Custom_1").val());
});
Perhaps you should try :
$(function() {
//your slider setUp was here
function getSliderValue(){
return $("#CAT_Custom_1").val();
}
$("button").click(function(){
alert(getSliderValue());
});
});
I just simply made a function that returns the current value of that input type. Now you just tweak it a little, to avoid the empty value instead of 0. :) From somewhere outside, call the function and store the returned value where you need it.
Related
I am trying to do what seems to be simple but am unable to accomplish
I am trying to set the value of a column after a row focus change in a grid to a hidden value in java script.
My imbedded javascript code:
function OnGridFocusedRowChanged() {
grdA.GetRowValues(grdA.GetFocusedRowIndex(), 'ClientID', OnGetRowValues);
}
function OnGetRowValues(values) {
//Set hidden value
document.getElementById('<%=hdnClientID.ClientID%>').value = values[0];
//Fire button click
btnPopulateGrids_Click();
}
where hdnClientID is the name of my hidden field
In GridA I have the setting as such that OnGridFocusedRowChanged gets executed each time a row focus change takes place.
To this point, it works fine, the values[0] in OnGetRowValues() contains the correct value from the corresponding row in GridA.
But in the corresponding code behind, I cannot access the value from hidden field hdnClientID. Always comes up null when accessing
Current_Client_ID = CInt(hdnClientID.Value);
cannot access or convert any value from
hdnClientID.ClientID.
either.
I'm missing something simple.
I had to complete a similar task recently and I too was unable to access the value from codebehind. I researched and found out that it is not that simple and that you can't do it with javascript. What I would recommend is to check if you have jQuery installed and if you do, change your function to this:
function OnGetRowValues(values) {
//Set hidden value
$('#<%=hdnClientID.ClientID%>').val(values[0]);
//Fire button click
btnPopulateGrids_Click();
//If you change your HiddenField to have OnValueChange event, you can trigger it with this
//__doPostBack('<%= CompanyCode.ClientID %>', '');
}
Also, I guess you are firing some function from code behind with btnPopulateGrids_Click();.
I would recommend adding OnValueChanged="hdnClientID_OnValueChanged"/> to your <asp:HiddenField/> and using my supplied function triggering method.
I want to fetch the selected option from dropdown. I know I can get selected option with jQuery(dropdown).val(). But I am not able fetch the selected with the 'val' function.
Am I doing anything wrong here?
Just use this:
var selectedValue = $('.daterange-preset').val();
(Note: I was able to see your code and get your class name by zooming in, but in the future please post the code rather than a screenshot.)
try using .on( "change" and then finding the option where selected has been applied. I have attached a jsfiddle with a working example that will alert you the value of the selected option everytime you change it.
$('.datarange-preset').on( "change", function(){
var datarangeSelected = $('.datarange-preset').find(":selected").val();
alert(datarangeSelected);
});
http://jsfiddle.net/g8hVA/
I figured out the issue. In my code at one place dropdown value was getting set with the null.
$daterangePreset.val(someVarialwithNullValue);
Because the value was getting set with null. I don't see any update in the HTML. HTML still shows one of the option as 'selected'. So when I was trying to get the selected value with following syntax it was always returning null.
$daterangePreset.val();
You can use a variant of:
var text = $("option:selected").text();
var value = $("option:selected").val();
I have a select element in a form with id of "qlt".
And if I change the value of that selection, other SELECT(#names) element changes its option(s).
However, it seems the change function takes effect at the moment I tick the dropdown, not after the value has changed.
So my jquery code condition below has an opposite effect. If the value of qlt is 14-1, then the selection will have "Hello (90x55mm)" as its option insted of Business Card (90x55mm.
var qlt = (jQuery("#qlt").val()).split(":")[0];
jQuery('#qlt').change(function(){
if(qlt=="14-1"){
ChangeOptions(["Business Card (90x55mm)"],"#names",[1]);
}
else if(qlt=="14-2"){
ChangeOptions(["Hello (90x55mm)"],"#names",[2]);
}
});
jQuery('#names').change(function(){
quantities=[50,100,250,500,1000,2000,5000];
ChangeOptions(quantities,"#qlnt",quantities);
});
If my question is not clear, you can visit the actual site here:
http://210.48.94.218/~printabl/products/labels-stickers/
The two select elements I am referring to are the Quality and Size dropdowns. The form is in the middle.
The actual problem looks like the order of callback execution
The qlt variable is set using the method calculate which is registered using jQuery("select").change(calculate); at line 701.
But the change options callback is registered at line 528 which will get executed before the calculate method is called that is why the value of qlt is not updated until next select.
One solution is to move jQuery("select").change(calculate); before line 528 another one is below
It might be a problem of some script execution, I assume qlt is supposed to be the current selected value in the #qlt input then you can declare a local variable and assign the current value using $(this).val()
jQuery('#qlt').change(function(){
var qlt = $(this).val().split(":")[0];
if(qlt=="14-1"){
ChangeOptions(["Business Card (90x55mm)"],"#names",[1]);
}
else if(qlt=="14-2"){
ChangeOptions(["Hello (90x55mm)"],"#names",[2]);
}
});
I have several images with the class "red".
When the user clicks on any of them, a form field with the Id of "red" should be incremented.
I'm trying to write this in a way that is easy to re-use.
I can't figure out if there is a way of incrementing the form field value without using a global variable. Simply writing
$(#red).val(++);
doesn't do anything.
If I first declare a global variable like
var redAmount;
$(#red).val(redAmount++);
it works, but I don't like the idea of having to type the color + Amount each time I re-use this for other colors.
Which made me try to form the variable name dynamically like
var redAmount;
var currentColor = $(obj).attr("class"); //getting the class of the clicked element
$('#' + currentColor).val(currentColor+'Amount'++); //trying to form the variable name dynamically but failing
Sorry for the long explanation. What I'm trying to ask is this:
Can I increment the form value without a global variable
If not, how do I form the variable name dynamically based on the class of the clicked element
You can do this with the increment operator in plain-old JavaScript:
document.getElementById("red").value++;
jsFiddle
Code revised with tested sample.
http://jsfiddle.net/webwarrior/CrjY9/25/
Are you not trying to increment the value of item you are clicking on?
jQuery("img").click(function () {
jQuery("#" + jQuery(this).attr("class"))[0].value++;
});
Hope this helps.
This is the true JQuery way, but I guess the JavaScript value++ way is just as good, in some browsers.
I have a dropdown box that has a list of institutions in it. Now if I manually select an option, it works and I am able to grab the correct value.
However, I have a select rates button which uses JavaScript to pull up a rate sheet. You select a rate from that sheet and it will select an option from the dropdown for you (one that corresponds with the rate from the rate sheet). If I use this method, it doesn't trigger a .change() therefor I can't get a value for the selected option.
$('#id_financial_institution').change(function () {
var value = $("#id_financial_institution option:selected").text()
$("fi").text(value);
});
Any suggestions? I have tried .change() and .click() but nothing.
Once you are in the change function you don't have to do another search or selector because you already have the object you just have to find the selected option from it. So you can try this:
$('#id_financial_institution').change(function () {
var value = $(this).find("option:selected").text();
$("fi").text(value);
});
If the code still doesn't return you answer start to add alerts at each point to see where you are and what values you have and work your way from there?
Rather than .text() use .val()
$(function() {
$('#id_financial_institution').change(function () {
var value = $("#id_financial_institution option:selected").val()
alert(value);
});
})
Here is a sample demo, without your html. I am just alerting the value.
DEMO
You're going about this all wrong. You already have the select element in this, all you need is the value of that select element.
$('#id_financial_institution').change(function () {
var value = $(this).val();
$('#fi').text(value); //i assume `fi` is an [id]
//do more stuff
});
I went inside my AJAX call and got the value of the fields I needed there. For some reason, when using the AJAX call, it wouldn't fire the .change() on that particular field.
Thanks for all your input everyone.